I marcatori sono piccole icone rosse che segnano posizioni importanti sulle mappe di Google. Facendo clic su un marcatore spesso si apre una finestra che rivela informazioni utili circa la posizione sotto il marcatore. Se l'applicazione Web utilizza Application Programming Interface di Google per visualizzare le mappe, è possibile creare una funzione che rende una finestra informativa appare quando il mouse passa sopra ogni marcatore.

Aggiunta di un marcatore

Marcatori su una mappa di Google si muovono lungo con la mappa quando si trascina per vedere luoghi diversi. Il codice seguente crea un oggetto LatLng che permette di aggiungere un marker per mappare: nome map1:

var LatLng1 = new google.maps.LatLng (37.97, 121.81);

I numeri 37,97 e 121.81 rappresentano la latitudine e la longitudine della posizione in cui si desidera inserire il marcatore. Il codice riportato di seguito crea un marcatore in quella posizione.

var marker1 = new google.maps.Marker ({
Posizione: LatLng1,
Titolo: "Marker1!"
});

marker1.setMap (map1);

Se la variabile che contiene un riferimento alla mappa ha un nome diverso, sostituire "map1" con quel nome.

mouseover Eventi

I listener di eventi rendono possibile per gli oggetti di una pagina Web di rispondere quando si verificano azioni. Muovi il mouse su un'immagine in una pagina Web normale, per esempio, e un evento mouseover può causare l'immagine per ingrandire. L'interfaccia di programmazione di Google Application viene addebbitato GEvent.addDomListener, un listener di eventi che consente di aggiungere funzionalità di hover per le mappe. Per ottenere un marcatore per visualizzare la sua finestra di informazioni, creare una finestra di informazioni e allegare un listener di eventi mouseover al marcatore.

Evento Codice Listener

Il codice mostrato qui crea un nuovo oggetto finestra di informazioni di nome infowindow1. Le sue dimensioni, che si può cambiare, sono larghi 60 pixel e alto 70 pixel. Il codice mostrato crea un nuovo oggetto finestra di informazioni di nome infowindow1, la cui larghezza è di 60 pixel e l'altezza è di 70 pixel.

var infowindow1 = new google.maps.InfoWindow (
{Content: "Marker1 Info",
Dimensioni: nuova google.maps.Size (60, 70)
});

Aggiungere i seguenti gestori di eventi dopo questo codice, e l'applicazione è pronta per visualizzare la finestra di informazioni quando si passa il mouse sopra marcatore della mappa:

google.maps.event.addListener (marker1, 'mouseover', function () {
infowindow1.open (map1, marker1);
});
google.maps.event.addListener (marker1, 'mouseout', function () {
infowindow1.close (map1, marker1);
});

considerazioni

Le ultime due righe di codice elencato in questo esempio anche creare un evento mouseout. Questo fa sì che la finestra delle informazioni a scomparire quando si sposta il mouse di distanza dal marcatore. Aggiungere il numero di marcatori per la vostra mappa come ti piace e configurarli utilizzando queste tecniche di codifica. Se le finestre di informazione sono troppo piccole per contenere il contenuto desiderato, renderli più grandi quando si creano loro. Quando si definisce la latitudine e longitudine per l'oggetto LatLng, garantire che tali coordinate si trovano all'interno della mappa tuoi visualizzata la pagina Web.