Introduzione
Un indicatore identifica una località su una mappa. Per impostazione predefinita, un indicatore utilizza un
nell'immagine standard. Gli indicatori possono mostrare immagini personalizzate, nel qual caso vengono
generalmente definite "icone". Gli indicatori e le icone sono oggetti di tipo
Marker
Puoi impostare un'icona personalizzata all'interno del costruttore dell'indicatore oppure
chiamata setIcon()
sull'indicatore. Scopri di più su
personalizzazione dell'immagine dell'indicatore.
In generale, gli indicatori sono un tipo di overlay. Per informazioni su altri tipi di overlay, consulta Disegnare sulla mappa.
Gli indicatori sono progettati per essere interattivi. Ad esempio, per impostazione predefinita
riceveranno 'click'
eventi, per consentirti di aggiungere un listener di eventi a
richiama un
finestra informativa
visualizzare informazioni personalizzate. Puoi consentire agli utenti di spostare un indicatore
mappa impostando la proprietà draggable
dell'indicatore su
true
. Per ulteriori informazioni sugli indicatori trascinabili, consulta
di seguito.
Aggiungi un marcatore
La
google.maps.Marker
prende un singolo oggetto Marker options
che specifica le proprietà iniziali dell'indicatore.
I seguenti campi sono particolarmente importanti e vengono comunemente impostati quando per creare un indicatore:
-
position
(obbligatorio) specifica unLatLng
che identifica la posizione iniziale dell'indicatore. Uno. per recuperare unLatLng
è utilizzare Servizio di geocodifica. -
map
(facoltativo) specifica ilMap
su cui posiziona l'indicatore. Se non specifichi la mappa relativa alla costruzione del indicatore, l'indicatore è stato creato ma non è attaccato a (o visualizzato su) la mappa. Puoi aggiungere l'indicatore in un secondo momento richiamandosetMap()
.
Nell'esempio seguente viene aggiunto un indicatore semplice a una mappa di Uluru, nella centro dell'Australia:
TypeScript
function initMap(): void { const myLatLng = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: myLatLng, } ); new google.maps.Marker({ position: myLatLng, map, title: "Hello World!", }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const myLatLng = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: myLatLng, }); new google.maps.Marker({ position: myLatLng, map, title: "Hello World!", }); } window.initMap = initMap;
Prova Sample
Nell'esempio precedente, l'indicatore è posizionato sulla mappa in corrispondenza dei lavori in corso
l'indicatore utilizzando la proprietà map
nelle opzioni dell'indicatore.
In alternativa, puoi aggiungere direttamente l'indicatore alla mappa utilizzando
metodo setMap()
dell'indicatore, come mostrato nell'esempio seguente:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 4, center: myLatlng } var map = new google.maps.Map(document.getElementById("map"), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!" }); // To add the marker to the map, call setMap(); marker.setMap(map);
L'elemento title
dell'indicatore verrà visualizzato come descrizione comando.
Se non vuoi trasmettere Marker options
nel
dell'indicatore, passa un oggetto vuoto {}
nel
l'ultimo argomento del costruttore.
Rimuovere un indicatore
Per rimuovere un indicatore dalla mappa, chiama il metodo setMap()
passando null
come argomento.
marker.setMap(null);
Il metodo descritto sopra non elimina l'indicatore. Rimuove il parametro
indicatore dalla mappa. Se invece vuoi eliminare l'indicatore, devi
rimuoverlo dalla mappa e poi impostare l'indicatore su
null
.
Se vuoi gestire un insieme di indicatori, devi creare un array che contenga
gli indicatori. Utilizzando questo array, puoi quindi chiamare setMap()
su
ogni indicatore nella matrice quando devi rimuovere gli indicatori. Tu
puoi eliminare gli indicatori rimuovendoli dalla mappa e impostando poi
da length
a 0
dell'array, in modo da rimuovere tutti
riferimenti agli indicatori.
Personalizzare l'immagine di un indicatore
Puoi personalizzare l'aspetto visivo degli indicatori specificando un file immagine o l'icona basata su vettori da visualizzare al posto di quella predefinita Icona a forma di puntina da disegno di Google Maps. Puoi aggiungere testo con un l'etichetta dell'indicatore e utilizzare icone complesse per definire le aree cliccabili e imposta l'ordine in pila degli indicatori.
Indicatori con icone di immagini
Nella maggior parte dei casi, per un'icona è possibile specificare un'immagine da utilizzare al posto del
icona puntina da disegno predefinita di Google Maps. Per specificare un'icona di questo tipo, imposta
proprietà icon
dell'indicatore all'URL di un'immagine. L'API Maps JavaScript ridimensiona automaticamente l'icona.
TypeScript
// This example adds a marker to indicate the position of Bondi Beach in Sydney, // Australia. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, } ); const image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; const beachMarker = new google.maps.Marker({ position: { lat: -33.89, lng: 151.274 }, map, icon: image, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a marker to indicate the position of Bondi Beach in Sydney, // Australia. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, }); const image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; const beachMarker = new google.maps.Marker({ position: { lat: -33.89, lng: 151.274 }, map, icon: image, }); } window.initMap = initMap;
Prova Sample
Indicatori con icone vettoriali
Puoi utilizzare percorsi vettoriali SVG personalizzati per definire l'aspetto visivo
gli indicatori. A questo scopo, passa un valore letterale oggetto Symbol
con
percorso desiderato alla proprietà icon
dell'indicatore. Puoi definire
un percorso personalizzato
notazione del percorso SVG oppure utilizza uno dei percorsi predefiniti
google.maps.SymbolPath. La proprietà anchor
è obbligatoria per far sì che l'indicatore
vengono visualizzati correttamente quando cambia il livello di zoom. Scopri di più su
usando i simboli per creare icone vettoriali
per gli indicatori (e le polilinee).
TypeScript
// This example uses SVG path notation to add a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a blue fill and no border. function initMap(): void { const center = new google.maps.LatLng(-33.712451, 150.311823); const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 9, center: center, } ); const svgMarker = { path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(0, 20), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example uses SVG path notation to add a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a blue fill and no border. function initMap() { const center = new google.maps.LatLng(-33.712451, 150.311823); const map = new google.maps.Map(document.getElementById("map"), { zoom: 9, center: center, }); const svgMarker = { path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(0, 20), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); } window.initMap = initMap;
Prova Sample
Etichette dell'indicatore
L'etichetta di un indicatore è una lettera o un numero che appare all'interno di un indicatore. La
l'immagine dell'indicatore in questa sezione mostra un'etichetta con la lettera "B"
. Puoi specificare un'etichetta di indicatore come stringa o come
MarkerLabel
che include una stringa e altre proprietà delle etichette.
Quando crei un indicatore, puoi specificare una proprietà label
in
il
MarkerOptions
. In alternativa, puoi chiamare setLabel()
sul
Indicatore
per impostare l'etichetta su un indicatore esistente.
L'esempio seguente mostra indicatori etichettati quando l'utente fa clic sul mappa:
TypeScript
// In the following example, markers appear when the user clicks on the map. // Each marker is labeled with a single alphabetical character. const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let labelIndex = 0; function initMap(): void { const bangalore = { lat: 12.97, lng: 77.59 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 12, center: bangalore, } ); // This event listener calls addMarker() when the map is clicked. google.maps.event.addListener(map, "click", (event) => { addMarker(event.latLng, map); }); // Add a marker at the center of the map. addMarker(bangalore, map); } // Adds a marker to the map. function addMarker(location: google.maps.LatLngLiteral, map: google.maps.Map) { // Add the marker at the clicked location, and add the next-available label // from the array of alphabetical characters. new google.maps.Marker({ position: location, label: labels[labelIndex++ % labels.length], map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// In the following example, markers appear when the user clicks on the map. // Each marker is labeled with a single alphabetical character. const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let labelIndex = 0; function initMap() { const bangalore = { lat: 12.97, lng: 77.59 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: bangalore, }); // This event listener calls addMarker() when the map is clicked. google.maps.event.addListener(map, "click", (event) => { addMarker(event.latLng, map); }); // Add a marker at the center of the map. addMarker(bangalore, map); } // Adds a marker to the map. function addMarker(location, map) { // Add the marker at the clicked location, and add the next-available label // from the array of alphabetical characters. new google.maps.Marker({ position: location, label: labels[labelIndex++ % labels.length], map: map, }); } window.initMap = initMap;
Prova Sample
Icone complesse
Puoi specificare forme complesse per indicare le aree su cui è possibile fare clic e
specificare come devono apparire le icone rispetto ad altri overlay (loro
"ordine in pila"). Le icone specificate in questo modo devono impostare la propria
icon
a un oggetto di tipo
Icon
Icon
definiscono un'immagine. Definiscono anche il size
del
, la origin
dell'icona (se l'immagine che desideri fa parte
di un'immagine più grande in uno sprite, ad esempio) e
anchor
in cui deve essere posizionato l'hotspot dell'icona (ovvero
in base all'origine).
Se utilizzi un'etichetta con un oggetto
l'indicatore, puoi posizionare l'etichetta con
proprietà labelOrigin
nel
Icon
.
TypeScript
// The following example creates complex markers to indicate beaches near // Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond // to the base of the flagpole. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 10, center: { lat: -33.9, lng: 151.2 }, } ); setMarkers(map); } // Data for the markers consisting of a name, a LatLng and a zIndex for the // order in which these markers should display on top of each other. const beaches: [string, number, number, number][] = [ ["Bondi Beach", -33.890542, 151.274856, 4], ["Coogee Beach", -33.923036, 151.259052, 5], ["Cronulla Beach", -34.028249, 151.157507, 3], ["Manly Beach", -33.80010128657071, 151.28747820854187, 2], ["Maroubra Beach", -33.950198, 151.259302, 1], ]; function setMarkers(map: google.maps.Map) { // Adds markers to the map. // Marker sizes are expressed as a Size of X,Y where the origin of the image // (0,0) is located in the top left of the image. // Origins, anchor positions and coordinates of the marker increase in the X // direction to the right and in the Y direction down. const image = { url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", // This marker is 20 pixels wide by 32 pixels high. size: new google.maps.Size(20, 32), // The origin for this image is (0, 0). origin: new google.maps.Point(0, 0), // The anchor for this image is the base of the flagpole at (0, 32). anchor: new google.maps.Point(0, 32), }; // Shapes define the clickable region of the icon. The type defines an HTML // <area> element 'poly' which traces out a polygon as a series of X,Y points. // The final coordinate closes the poly by connecting to the first coordinate. const shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: "poly", }; for (let i = 0; i < beaches.length; i++) { const beach = beaches[i]; new google.maps.Marker({ position: { lat: beach[1], lng: beach[2] }, map, icon: image, shape: shape, title: beach[0], zIndex: beach[3], }); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// The following example creates complex markers to indicate beaches near // Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond // to the base of the flagpole. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 10, center: { lat: -33.9, lng: 151.2 }, }); setMarkers(map); } // Data for the markers consisting of a name, a LatLng and a zIndex for the // order in which these markers should display on top of each other. const beaches = [ ["Bondi Beach", -33.890542, 151.274856, 4], ["Coogee Beach", -33.923036, 151.259052, 5], ["Cronulla Beach", -34.028249, 151.157507, 3], ["Manly Beach", -33.80010128657071, 151.28747820854187, 2], ["Maroubra Beach", -33.950198, 151.259302, 1], ]; function setMarkers(map) { // Adds markers to the map. // Marker sizes are expressed as a Size of X,Y where the origin of the image // (0,0) is located in the top left of the image. // Origins, anchor positions and coordinates of the marker increase in the X // direction to the right and in the Y direction down. const image = { url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", // This marker is 20 pixels wide by 32 pixels high. size: new google.maps.Size(20, 32), // The origin for this image is (0, 0). origin: new google.maps.Point(0, 0), // The anchor for this image is the base of the flagpole at (0, 32). anchor: new google.maps.Point(0, 32), }; // Shapes define the clickable region of the icon. The type defines an HTML // <area> element 'poly' which traces out a polygon as a series of X,Y points. // The final coordinate closes the poly by connecting to the first coordinate. const shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: "poly", }; for (let i = 0; i < beaches.length; i++) { const beach = beaches[i]; new google.maps.Marker({ position: { lat: beach[1], lng: beach[2] }, map, icon: image, shape: shape, title: beach[0], zIndex: beach[3], }); } } window.initMap = initMap;
Prova Sample
Conversione di MarkerImage
oggetti nel tipo Icon
in corso...
Fino alla versione 3.10 dell'API Maps JavaScript, icone complesse
sono stati definiti come oggetti MarkerImage
. La
Il valore letterale oggetto Icon
è stato aggiunto nella versione 3.10 e sostituisce
MarkerImage
dalla versione 3.11 in poi.
I valori letterali oggetto Icon
supportano gli stessi parametri dei
MarkerImage
, che ti consente di convertire facilmente un
MarkerImage
a un Icon
rimuovendo il valore
che racchiude i parametri precedenti tra quelli di {}
e
aggiungendo i nomi di ogni parametro. Ad esempio:
var image = new google.maps.MarkerImage( place.icon, new google.maps.Size(71, 71), new google.maps.Point(0, 0), new google.maps.Point(17, 34), new google.maps.Size(25, 25));
diventa
var image = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) };
Indicatori Ottimizza
L'ottimizzazione migliora il rendimento eseguendo il rendering di molti indicatori come uno solo statico. Ciò è utile nei casi in cui viene mostrato un numero elevato di indicatori obbligatorio. Per impostazione predefinita, l'API Maps JavaScript decide se un indicatore verrà ottimizzato. In presenza di un elevato numero gli indicatori, l'API Maps JavaScript tenterà di eseguire indicatori con l'ottimizzazione. Non tutti gli indicatori possono essere ottimizzati; in alcuni in situazioni simili, l'API Maps JavaScript potrebbe dover eseguire il rendering Indicatori senza ottimizzazione. Disattiva il rendering ottimizzato per le animazioni GIF o PNG oppure quando ogni indicatore deve essere visualizzato come un DOM separato . Il seguente esempio illustra la creazione di un indicatore ottimizzato:
var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!", optimized: true });
Rendi accessibile un indicatore
Puoi rendere accessibile un indicatore aggiungendo un evento listener di clic.
Impostazione di optimized
su false
. Listener di clic
fa sì che l'indicatore presenti la semantica del pulsante, a cui è possibile accedere utilizzando
navigazione da tastiera, screen reader e così via. Utilizza la
Opzione title
per presentare testo accessibile per un indicatore.
Nel seguente esempio, il primo indicatore viene attivato quando il tasto Tab è premuto; puoi utilizzare i tasti freccia per spostarti tra gli indicatori. Premi premi il tasto Tab di nuovo per continuare a spostarti tra gli altri controlli della mappa. Se ha una finestra informativa, puoi aprirla facendo clic sull'indicatore oppure premendo il tasto Invio o la barra spaziatrice quando l'indicatore è selezionato. Quando la finestra informativa si chiude, lo stato attivo tornerà all'indicatore associato.
TypeScript
// The following example creates five accessible and // focusable markers. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 12, center: { lat: 34.84555, lng: -111.8035 }, } ); // Set LatLng and title text for the markers. The first marker (Boynton Pass) // receives the initial focus when tab is pressed. Use arrow keys to // move between markers; press tab again to cycle through the map controls. const tourStops: [google.maps.LatLngLiteral, string][] = [ [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"], [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"], [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"], [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"], [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"], ]; // Create an info window to share between markers. const infoWindow = new google.maps.InfoWindow(); // Create the markers. tourStops.forEach(([position, title], i) => { const marker = new google.maps.Marker({ position, map, title: `${i + 1}. ${title}`, label: `${i + 1}`, optimized: false, }); // Add a click listener for each marker, and set up the info window. marker.addListener("click", () => { infoWindow.close(); infoWindow.setContent(marker.getTitle()); infoWindow.open(marker.getMap(), marker); }); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// The following example creates five accessible and // focusable markers. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 34.84555, lng: -111.8035 }, }); // Set LatLng and title text for the markers. The first marker (Boynton Pass) // receives the initial focus when tab is pressed. Use arrow keys to // move between markers; press tab again to cycle through the map controls. const tourStops = [ [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"], [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"], [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"], [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"], [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"], ]; // Create an info window to share between markers. const infoWindow = new google.maps.InfoWindow(); // Create the markers. tourStops.forEach(([position, title], i) => { const marker = new google.maps.Marker({ position, map, title: `${i + 1}. ${title}`, label: `${i + 1}`, optimized: false, }); // Add a click listener for each marker, and set up the info window. marker.addListener("click", () => { infoWindow.close(); infoWindow.setContent(marker.getTitle()); infoWindow.open(marker.getMap(), marker); }); }); } window.initMap = initMap;
Prova Sample
Animazione di un indicatore
Puoi animare gli indicatori in modo che mostrino movimenti dinamici in una varietà di
di circostanze diverse. Per specificare la modalità di animazione di un indicatore, utilizza
proprietà animation
dell'indicatore, di tipo
google.maps.Animation
. Le seguenti
Sono supportati i valori Animation
:
-
DROP
indica che l'indicatore deve scendere dalla parte superiore di dalla mappa alla sua posizione finale. Animazione cesserà quando l'indicatore si fermerà eanimation
ripristinanull
. Questo tipo di animazione viene in genere specificato durante la creazione dell'Marker
. -
BOUNCE
indica che l'indicatore deve rimbalzare in posizione. R l'indicatore di rimbalzo continuerà a rimbalzare fino a quando La proprietàanimation
è impostata esplicitamente sunull
.
Puoi avviare un'animazione su un indicatore esistente chiamando
setAnimation()
sull'oggetto Marker
.
TypeScript
// The following example creates a marker in Stockholm, Sweden using a DROP // animation. Clicking on the marker will toggle the animation between a BOUNCE // animation and no animation. let marker: google.maps.Marker; function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 13, center: { lat: 59.325, lng: 18.07 }, } ); marker = new google.maps.Marker({ map, draggable: true, animation: google.maps.Animation.DROP, position: { lat: 59.327, lng: 18.067 }, }); marker.addListener("click", toggleBounce); } function toggleBounce() { if (marker.getAnimation() !== null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// The following example creates a marker in Stockholm, Sweden using a DROP // animation. Clicking on the marker will toggle the animation between a BOUNCE // animation and no animation. let marker; function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 13, center: { lat: 59.325, lng: 18.07 }, }); marker = new google.maps.Marker({ map, draggable: true, animation: google.maps.Animation.DROP, position: { lat: 59.327, lng: 18.067 }, }); marker.addListener("click", toggleBounce); } function toggleBounce() { if (marker.getAnimation() !== null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } } window.initMap = initMap;
Prova Sample
Se ci sono molti indicatori, è consigliabile non inserirli tutti sulla mappa
contemporaneamente. Puoi utilizzare setTimeout()
per distribuire i tuoi
gli indicatori utilizzando uno schema simile a quello mostrato di seguito:
function drop() { for (var i =0; i < markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); } }
Rendi trascinabile un indicatore
Per consentire agli utenti di trascinare un indicatore in una posizione diversa sulla mappa, imposta
Da draggable
a true
nelle opzioni degli indicatori.
var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 4, center: myLatlng } var map = new google.maps.Map(document.getElementById("map"), mapOptions); // Place a draggable marker on the map var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable:true, title:"Drag me!" });
Ulteriore personalizzazione dell'indicatore
Per un indicatore completamente personalizzato, vedi la sezione esempio di popup personalizzato.
Per ulteriori estensioni della classe Marker, per il raggruppamento e la gestione degli indicatori e per la personalizzazione degli overlay, consulta librerie open source.