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
2 commenti:
Ciao, Cirdan. Grazie al tuo commento lasciato su Scientificando sono arrivata su questo tuo blog che non conoscevo. Penso sia molto interessante. Lo feedo.
Buon lavoro.
annarita:)
Ciao, grande guida che ho letto con attenzione.
Ho 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.....
Posta un commento