Panoramica
Questo tutorial insegna come modificare l'icona di un livello avanzato di Google Maps per utilizzare un'immagine grafica personalizzata. È utile conoscere nozioni di base sulla creazione degli indicatori quando usi questo tutorial.
La mappa di esempio che segue mostra l'uso di indicatori personalizzati per indicare diversi tipi di luoghi.
La sezione seguente elenca tutto il codice in cui devi creare la mappa questo tutorial.
TypeScript
let map: google.maps.Map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16, mapId: "DEMO_MAP_ID", }); const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons: Record<string, { icon: string }> = { parking: { icon: iconBase + "parking_lot_maps.png", }, library: { icon: iconBase + "library_maps.png", }, info: { icon: iconBase + "info-i_maps.png", }, }; const features = [ { position: new google.maps.LatLng(-33.91721, 151.2263), type: "info", }, { position: new google.maps.LatLng(-33.91539, 151.2282), type: "info", }, { position: new google.maps.LatLng(-33.91747, 151.22912), type: "info", }, { position: new google.maps.LatLng(-33.9191, 151.22907), type: "info", }, { position: new google.maps.LatLng(-33.91725, 151.23011), type: "info", }, { position: new google.maps.LatLng(-33.91872, 151.23089), type: "info", }, { position: new google.maps.LatLng(-33.91784, 151.23094), type: "info", }, { position: new google.maps.LatLng(-33.91682, 151.23149), type: "info", }, { position: new google.maps.LatLng(-33.9179, 151.23463), type: "info", }, { position: new google.maps.LatLng(-33.91666, 151.23468), type: "info", }, { position: new google.maps.LatLng(-33.916988, 151.23364), type: "info", }, { position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), type: "parking", }, { position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), type: "parking", }, { position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), type: "parking", }, { position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), type: "parking", }, { position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), type: "parking", }, { position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), type: "parking", }, { position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), type: "parking", }, { position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), type: "library", }, ]; for (let i = 0; i < features.length; i++) { const iconImage = document.createElement("img"); iconImage.src = icons[features[i].type].icon; const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: features[i].position, content: iconImage, }) } } initMap();
JavaScript
let map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( "marker", ); map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16, mapId: "DEMO_MAP_ID", }); const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons = { parking: { icon: iconBase + "parking_lot_maps.png", }, library: { icon: iconBase + "library_maps.png", }, info: { icon: iconBase + "info-i_maps.png", }, }; const features = [ { position: new google.maps.LatLng(-33.91721, 151.2263), type: "info", }, { position: new google.maps.LatLng(-33.91539, 151.2282), type: "info", }, { position: new google.maps.LatLng(-33.91747, 151.22912), type: "info", }, { position: new google.maps.LatLng(-33.9191, 151.22907), type: "info", }, { position: new google.maps.LatLng(-33.91725, 151.23011), type: "info", }, { position: new google.maps.LatLng(-33.91872, 151.23089), type: "info", }, { position: new google.maps.LatLng(-33.91784, 151.23094), type: "info", }, { position: new google.maps.LatLng(-33.91682, 151.23149), type: "info", }, { position: new google.maps.LatLng(-33.9179, 151.23463), type: "info", }, { position: new google.maps.LatLng(-33.91666, 151.23468), type: "info", }, { position: new google.maps.LatLng(-33.916988, 151.23364), type: "info", }, { position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), type: "parking", }, { position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), type: "parking", }, { position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), type: "parking", }, { position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), type: "parking", }, { position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), type: "parking", }, { position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), type: "parking", }, { position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), type: "parking", }, { position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), type: "library", }, ]; for (let i = 0; i < features.length; i++) { const iconImage = document.createElement("img"); iconImage.src = icons[features[i].type].icon; const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: features[i].position, content: iconImage, }); } } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Custom Markers</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Prova Sample
Personalizzare un indicatore
Puoi modificare l'icona dell'indicatore rosso predefinito ()
con un'immagine personalizzata di tua scelta. L'esempio seguente mostra come sostituire il valore
icona predefinita con un file PNG personalizzato.
// A marker with a with a URL pointing to a PNG. const beachFlagImg = document.createElement("img"); beachFlagImg.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; const beachFlagMarkerView = new AdvancedMarkerElement({ map, position: { lat: 37.434, lng: -122.082 }, content: beachFlagImg, title: "A marker using a custom PNG Image", });
Scopri altri modi per creare indicatori con le immagini.
Personalizza gli indicatori per elementi della mappa
Ogni punto d'interesse nell'elenco degli elementi del campus ha un type
. Nota come l'estrazione del codice in basso specifica parking
, library
e info
. Puoi personalizzare l'icona dell'indicatore a seconda della mappa
funzionalità type
che hai impostato.
const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/"; const icons: Record<string, { icon: string }> = { parking: { icon: iconBase + "parking_lot_maps.png", }, library: { icon: iconBase + "library_maps.png", }, info: { icon: iconBase + "info-i_maps.png", }, }; function addMarker(feature) { const iconImage = document.createElement("img"); iconImage.src = icons[feature.type].icon; const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: feature.position, content: iconImage, }) } addMarker(features[0]);