Nell'esempio viene utilizzato il metodo statico
GEvent.addListener
(marker, 'mouseover', function() {marker.openInfoWindowHtml(html)});
che attiva la visualizzazione, al passaggio del mouse, di una finestra di dialogo di una stringa (variabile html) contenente denominazione e descrizione del marker
Non credo ci siano ulteriori commenti da fare se non dare una occhiata al codice. Il risultato del progetto lo potete trovare qui.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Visualizzazione markers su Google Map tramite MySQL e PHP</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=LAVOSTRAAPIKEY"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(44.0750963, 10.700323), 8);
GDownloadUrl("creaxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var denom = markers[i].getAttribute("denom");
var indirizzo = markers[i].getAttribute("indirizzo");
var tipomarker = markers[i].getAttribute("tipomarker");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("long")));
var marker = createMarker(point, denom, indirizzo, tipomarker);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, denom, indirizzo, tipomarker) {
var marker = new GMarker(point);
var html = "("+tipomarker+")<br/><b>" + denom + "</b> <br/>" + indirizzo;
GEvent.addListener(marker, 'mouseover', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
</body>
</html>
Volendo raffinare l'applicazione, si potrebbe ad esempio visualizzare un marker di colore diverso per ogni tipologia di punto (nel nostro caso lavoro oppure studio). Il codice relativo non è molto più complicato di quanto abbiamo visto, potete fare rierimento alla già citata guida su Google Code. Oppure ci torneremo in uno dei prossimi articoli.
Post
Ciao, Cirdan. Grazie al tuo commento lasciato su Scientificando sono arrivata su questo tuo blog che non conoscevo. Penso sia molto interessante. Lo feedo.
RispondiEliminaBuon lavoro.
annarita:)
Ciao, grande guida che ho letto con attenzione.
RispondiEliminaHo provato a fare un passo avanti, cioè selezionare i punti da visualizzare da un db, ma non ci riesco....
la funzione GDowloadUrl infatti nel tuo caso prende i dati dal file creaxml.php mentre io vorrei che li prendesse direttamente dal ciclo while di output della query.....
ma non ci riesco.....
Complimenti per il tuto
RispondiEliminaSi puo fare un tuto utilizando quanto descritto ma permettendo di aggiungere una ricerca avanzata in una pagina HTML con campo. Ricerca per le denom "Scuola*" + ricerca tipomarker "istruzione".
Non oso chidere anche un filtro con raggio in KM.
So che esistono tutte le soluzioni in google, ma in italiano e inglese che ragruppo il tutto non trovo.
Un tuto cosi aiuterebbe sicuramente tanta gente come me e darebbe una bella sodisfazione di vedere uno script cosi completo
Paul psionnist@yahoo.it
Ciao. Ho provato ad utilizzare il metodo su un blog piattaforma wordpress.
RispondiEliminaTutto ben fino a che la pagina e' in modo bozza, se la pubblico la mappa non carica i markers. Aiuto! Un vero mistero. Grazie comunque per il bel tutorial.