Home / Programmazione / Javascript - AJAX / Usare AJAX con Google Maps
Mattepuffo

Usare AJAX con Google Maps

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!