Caricare markers da un database con MySQL e PHP (seconda parte)

Con quanto svolto nel precedente articolo abbiamo di fatto concluso il nostro lavoro. Si tratterà infatti di includere in una pagina html il codice che legga il file XML prodotto dallo script PHP e valorizzi i parametri dei vari metodi javascript per la visualizzazione.
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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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&#8221;
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.

Annunci

4 Responses to “Caricare markers da un database con MySQL e PHP (seconda parte)”


  1. 1 Annarita 7 febbraio 2009 alle 11:01 am

    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:)

  2. 2 Anonymous 1 giugno 2009 alle 11:49 am

    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…..

  3. 3 Anonymous 24 dicembre 2009 alle 6:12 pm

    Complimenti per il tutoSi 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 completoPaul psionnist@yahoo.it

  4. 4 Anonymous 1 febbraio 2010 alle 8:27 am

    Ciao. Ho provato ad utilizzare il metodo su un blog piattaforma wordpress.Tutto 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.


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...




Creative Commons License
Questo/a opera è pubblicato sotto una Licenza Creative Commons.

Addthis

AddThis Social Bookmark Button

Flickr Photos

Moods of blue

High heels

Altre foto

%d blogger hanno fatto clic su Mi Piace per questo: