paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

Google maps e i markers

Questi sono gli step che ho eseguito per raggiungere questo risultato

La google key

Includere la chiamate alle mappe di google, con la relativa Key, da richiedere sul sito. Nota: Ho sentito dire che dalla versione 3 (questa e' la 2) non e' piu' necessario richiedere la Key a google per accedere alle mappe. Per il momento le uso ancora...

<script> src="http://maps.google.com/maps?file=api&v=2&key=CHIAVE" type="text/javascript"> </script>

Inclusione della libreria markermanager.js

Io l'ho scaricata direttamente in locale, ma chiaramente puo' anche essere indicato il path assoluto.

<script>script src="markermanager.js"</script>

Caricamento della mappa.

Quello che ci serve e' che all'onload, la pagina ci carichi la mappa con tutti i marker e tutte le informazioni relative a questi (ovvero testo e immagini delle icone, con relativa dimensione). Una cosa importante, il caricamente di tutti i dati (long, lat, icone, etc...) avviene attraverso un file xml opportunamente costruito e che ha una struttura di questo tipo:

<xml version ='1.0' encoding ='UTF-8'>
<markers>
<marker lat="47.3889217449458" lng="-7.99836349487305" image="images.php?logo=1" height="38" width="50" alias="Nome Negozio1" phone1="123456678" address="via piazza, 14" city_name="citta" zipcode="9999" >
<marker lat="47.3824684933803" lng="-8.00377082824707" image="images.php?logo=1" height="38" width="50" alias="Nome Negozio2" phone1="123456678" address="via piazza, 5" city_name="citta" zipcode="9999" >
<marker lat="47.3828265483107" lng="-9.96574783325195" image="images.php?logo=1" height="38" width="50" alias="Nome Negozio3" phone1="123456678" address="via piazza, 62" city_name="citta" zipcode="9999" >
<marker lat="47.3817779540436" lng="-10.97231388092041" image="images.php?logo=1" height="38" width="50" alias="Nome Negozio4" phone1="123456678" address="via piazza, 6" city_name="citta" zipcode="9999" >
</markers>

Ho utilizzato questo metodo, perche' e' piu' gestibile a livello di codice, evitando che, con l'aumentare dei marker aumenti il contenuto, javascript, del mio file. Ma e' possibile evitare di crearlo e caricare i dati direttamente dal db o da un file di testo. Questo il codice dell'onload

<body onload="java-script:showAddress('<?php echo $state_name_default.", ".$city_name_default; ?>');">

Arriviamo quindi al codice javascript. Questa la funzione showAddress, dettagliata nei vari punti Questo serve per centrare la mappa

    function showAddress(address) {

    var geocoder = new GClientGeocoder();


    geocoder.getLatLng(
    address,
    function(point) {
        if (!point) {
            alert(address + " not found");
        } else {
            // inizio centra la mappa
            var map = new  GMap2(document.getElementById("DIV_CHE_CONTIENE_LA_MAPPA"));
            map.addControl(new GMapTypeControl());
            map.setUIToDefault();
            map.setCenter(point, 13);

Assegno un marker "semplice" (senza icone, ne' effetti al click) al centro della mappa

            // assegna un marker semplice al centro della mappa
            var marker = new GMarker(point);
            map.addOverlay(marker);
            marker.openInfoWindowHtml(address);
            GEvent.addListener(marker, "click", function() {
            marker<?=$contador?>.openInfoWindowHtml(address);
            });

Definizioni, dove MaxZoom e' il massimo zoom con il quale si puo' visualizzare il marker.

            var mgrOptions = { borderPadding: 50, maxZoom: 20, trackMarkers: true };
            var mgr = new MarkerManager(map, mgrOptions);

Apro l'xml

            GDownloadUrl("XML_GoogleMap.xml", function(data) {

leggo e scorro i vari marker presenti nell'xml. Richiamo, per ogni marker, la class GIcon di google

               var xml = GXml.parse(data);
                // scorro i vari marker (ovvero image,lat, etc...)
                var markersxml = xml.documentElement.getElementsByTagName("marker");

                var markers=[];

                for (i=0; i < markersxml.length; i++) {
	                   var icon_tienda = new GIcon();

assegno i vari parametri all'icona, dove, "InfoWindowAnchor" e' fondamentale per permettere il click, mentre "inconAnchor" indica in che posizione verra visualizzato il testo al click, rispetto al marker Nota: Image, puo' essere anche un indirizzo web con relativo parametro

            icon_tienda.image= markersxml[i].getAttribute("image");
            icon_tienda.iconSize = new GSize(markersxml[i].getAttribute("width"), markersxml[i].getAttribute("height"));
            icon_tienda.iconAnchor = new GPoint(37, 59);
            icon_tienda.infoWindowAnchor = new GPoint(31, 8);

Inserisco il testo che si visualizza al click sul marker. E' possibile inserire anche una immagine, oltre/insieme al testo

            var infoMarker="<div style=\"white-space:nowrap\"><strong>"+markersxml[i].getAttribute("alias")+"</strong><br>"+markersxml[i].getAttribute("phone1")+"<br>"+markersxml[i].getAttribute("address")+"<br>"+markersxml[i].getAttribute("city_name")+"<br>"+markersxml[i].getAttribute("zipcode")+"</div>";

definisco la coordinata

           var latlng = new GLatLng(markersxml[i].getAttribute("lat"),markersxml[i].getAttribute("lng"));

posiziono l'icona ed i suoi attributi

	var markerOptions = { icon:icon_tienda };

associo alla coordinata, l'icona e i suoi attributi

                    var marker=new GMarker(latlng,markerOptions);

Richiamo il metodo necessario per poter visualizzare le informazioni al click

              map.addOverlay(marker);
              marker.bindInfoWindowHtml(infoMarker);

Aggiorno l'array

                    markers.push(marker);
                }

Finito il ciclo...

Carico tutte le cordinate contemporaneamente questo e' un passaggio fondamente. Infatti, una sola richiesta a google e' piu' veloce di n-richieste per ogni coordinata. Tra l'altro google potrebbe bloccare dopo un tot di richieste, mentre con una sola non ci sono problemi.

                mgr.addMarkers(markers,1);
                mgr.refresh();
                });
            }
        });
}

Integro con altre risorse sull'argomento, quello gia' indicato nella prefazione,

http://code.google.com/intl/es/apis/maps/documentation/demogallery.html

Un consiglio. Attenzione quando indicate il formato della longitudine e latitudine, altrimenti google ritorna un errore incomprensibile e non carica nessun marker, anche se solo una di queste informazioni e' sbagliata. A me e' capitato che avevano inserito un valore (su centinaia) di longitudine senza il punto decimale "." e ho perso mezza giornata per capire quale era l'errore.

Spero di essere stato abbastanza esaustivo, altrimenti chiedetemi pure in privato