Usare AJAX con Google Maps

In questo articolo avevamo visto come impostare più indirizzi su Google Maps.

Solo che in quel caso gli indirizzi li abbiamo messi a mano, il che non è sempre comodo; pensate ad una mappa con centinaia di indirizzi!

Possiamo, però, risolvere prendendo i dati tramite AJAX!

Da dove li prendiamo ha relativa importanza, l'importante è che siano in formato JSON, che ci facilita di parecchio il lavoro.

Supponendo, però, di avere un db con latitudini e longitudini (come nel mio caso specifico):

$gc = new GoogleCoords(Connessione::getInstance());
$rows = array();
foreach ($gc->spGetBsGeoCoords() as $bs) {
    $rows[] = array(
        'lat' => $bs['latitudine'],
        'lon' => $bs['longitudine'],
        'clie_cod' => $bs['cliente'],
        'clie_ragsoc' => $bs['cliente_ragsoc'],
        'clie_citta' => $bs['cliente_localita'],
        'clie_prov' => $bs['cliente_provincia'],
        'clie_indirizzo' => $bs['cliente_indirizzo']
    );
}
echo json_encode($rows);

Questo script PHP dimostrativo, tira fuori i punti vendita dal mio db MySQL; come vedete il risultato è in JSON.

A questo punto nella pagina dobbiamo includere jQuery e la libreria per Google Maps:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxD5tSrR4CcVg7juDZyKmwXgVT8ABR5OA&sensor=true"></script>

<div id="map"></div>

Non ci rimane che inizializzare la mappa:

    var centerMap;
    var map;
    var mapOptions;
    var markerImage = 'marker.png';
    var infoWindow = new google.maps.InfoWindow();

    function initializeMap() {
        centerMap = new google.maps.LatLng(41.9100711, 12.5359979);
        var mapOptions = {
            center: centerMap,
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: greyStyle
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions);

        $.getJSON("geo_coords.php", function (json) {
            $.each(json, function (i, item) {
                var tooltip = '<div id="tooltip">' +
                        '<p>' + item.clie_cod + ' - ' + item.clie_ragsoc + '<br>' +
                        item.clie_citta + ' - ' + item.clie_prov + '<br>' +
                        item.clie_indirizzo
                '</div>';

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(item.lat, item.lon),
                    title: item.clie_ragsoc,
                    icon: markerImage,
                    html: tooltip
                });
                addInfoWindow(map, marker, tooltip);
            });
        });
    }

    function addInfoWindow(map, marker, message) {
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.close();
            infoWindow.setContent(message);
            infoWindow.open(map, marker);
        });
    }
    google.maps.event.addDomListener(window, 'load', initializeMap);

Prendiamo i dati remoti tramite il metodo getJSON, e iteriamo su di essi con il metodo each (entrambi in jQuery).

Con la funzione addInfoWindow, aggiungiamo le informazioni che ci servono al click sul marker; essendoci vari punti, prima facciamo in modo di chiudere gli altri, per evitare che ne rimanga visibile più di uno.

Enjoy!