Panoramica
Questo tutorial insegna come modificare l'icona di un indicatore avanzato di Google Maps per utilizzare un'immagine grafica personalizzata. Quando usi questo tutorial, è utile conoscere le nozioni di base sulla creazione degli indicatori.
La mappa di esempio che segue mostra l'utilizzo degli indicatori personalizzati per indicare i vari tipi di posizioni.
La sezione seguente elenca tutto il codice necessario per creare la mappa in 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 sostituire l'icona dell'indicatore rosso predefinito (
) con un'immagine personalizzata a tua scelta. L'esempio seguente mostra come sostituire
l'icona predefinita con un 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 attributo type. Nota come l'estrazione del codice in basso specifica i tipi parking, library e info. Puoi personalizzare l'icona dell'indicatore a seconda dell'elemento
della mappa type 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]);