Home / Programmazione / Javascript - AJAX / Usare più indirizzi su Google Maps
Mattepuffo

Usare più indirizzi su Google Maps

Usare più indirizzi su Google Maps

Gli esempi basici su Google Maps che troviamo in giro, prendono in considerazione sempre un solo indirizzo; ma magari ne vogliamo mettere di più!

Per farlo possiamo sfruttare gli array e poi impostare un marker per ogni indirizzo.

Attenzione però a non usarne troppi, perchè il tutto si potrebbe bloccare se superiamo il limite imposto per uso non commerciale (sempre che questi limiti ci siano ancora).

Comunque vediamo un rapido esempio che ho usato su un mio sito:

function initializeMap() {

    var centerMap = new google.maps.LatLng(41.892916, 12.48252);
    var mapOptions = {
        center: centerMap,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var markerImage = 'images/marker.png';
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var shops = [
        ['TECH IT EASY', '41.926099', '12.482303', 'Via D. Chelini, 19 00197 Roma'],
        ['TECH IT EASY', '41.902755', '12.480607', 'Via del Gambero,1 00187 Roma'],
        ['TECH IT EASY', '41.894828', '12.476103', 'Via Arenula,34/35 00186 Roma'],
        ['LIBRERIE ARION', '41.927015', '12.515877', 'Viale Eritrea, 72 m/n Roma'],
        ['LIBRERIE ARION', '41.905255', '12.487715', 'Via Veneto, 42 Roma '],
        ['LIBRERIE ARION', '41.892916', '12.48252', 'Palazzo delle Esposizioni Via Milano, 15/17 Roma'],
        ['PARIOLI 77', '41.9267877', '12.485930100000019', 'Viale Parioli, 77/e']
    ];

    for (var i = 0; i < shops.length; i++) {
        var s = shops[i];
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(s[1], s[2]),
            map: map,
            title: s[0],
            icon: markerImage
        });

        var tooltip = '<div id="tooltip">' +
                '<p><strong>' + s[0] + '</strong><br/>' +
                s[3] + '<br/>' +
                '</div>';

        var infoWindow = new google.maps.InfoWindow();

        var addListener = function(m, c) {
            google.maps.event.addListener(m, 'click', function() {
                infoWindow.setContent(c);
                infoWindow.open(map, m);
            });
        }

        addListener(marker, tooltip);
    }
}
google.maps.event.addDomListener(window, 'load', initializeMap);

Come vedete ho usato un array di array; così facendo per ogni marker posso impostare tutte le varie informazioni che mi servono e che si devono vedere nel tooltip.

Poi ciclo sull'array e imposto i marker con i tooltip.

Le modifiche da fare sono abbastanza poche rispetto all'uso di un solo indirizzo.

Ciao!!