Utilizzare Google Maps API

Google Maps API è una libreria javascript che può essere aggiunta ad una pagina web e ci permette di interagire con la mappa ed effettuare varie personalizzazioni, in questo esempio vedremo come in modo molto veloce come aggiungere punti di interesse con relative info aggiuntive.

Di seguito l’inclusione di Google Maps API

<script  src="http://maps.google.com/maps/api/js?sensor=false&language=en"  type="text/javascript"></script>

Creiamo un div che ospiterà la nostra mappa :

<div style="width:975px; height:520px; overflow:hidden;  background-color:#f4f4f4; " id="map" ></div>

A seguire il javascript che ci permetterà di creare punti di interesse e i popup. LoadObject ci permette di caricare l’oggetto markers che utilizzeremo per posizionare i punti di interesse (tramite latitudine e longitudine), nell’esempio abbiamo passato parametri aggiuntivi per i popup.

La funzione CreateMap e GeocodeAddress si occuperanno della creazione della mappa, dei punti di interesse e del popolamento dei popup:

function LoadObject(title, desc, lat, long, linklabel, linkurl, cover, phone, otherinfo) {
        var lat = lat;
        var long = long;
        var address = otherinfo;
        var addressLabel = desc;
        var label = title;
        var logomark = cover;
        var phone = phone;
        var link = linkurl;
        var linklabel = linklabel;
        var city = title;
        var heading = "heading";
        var icoMarker = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569";//
        var coordinateLat = lat;
        var coordinateLon = long;

        markers.push({
            name: city,
            icomark: icoMarker,
            location: address,
            addressLabel: addressLabel,
            label: label,
            logomark: logomark,
            coordinateLat: coordinateLat,
            coordinateLon: coordinateLon,
            phone: phone,
            link: linkurl,
            linklabel: linklabel,
            city: city,
            heading: heading,
            lat: coordinateLat,
            lng: coordinateLon
        });
    }
function CreateMap(cnt) {
  var map = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
    zoom: 6,
    streetViewControl: true,
    maxZoom: 15,
    minZoom:2
  });

  var bounds = new google.maps.LatLngBounds();
  for (index in markers) {
    var data = markers[index];
    GeocodeAddress(data, map, bounds, cnt);
  } //end for   
  //reset array length
  markers.length = 0;
} //end createMap

function GeocodeAddress(data, map, bounds, cnt) {
        var geocoder = new google.maps.Geocoder();
        var myLatlng = new google.maps.LatLng(data.coordinateLat, data.coordinateLon);
        if (cnt == 1) {
            var options = {
                zoom: 6,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                maxZoom: 15,
                minZoom: 2
            };
            var map = new google.maps.Map(document.getElementById('map'), options);
        }
        var pinIcon = new google.maps.MarkerImage(
           "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569",
           null, /* size is determined at runtime */
           null, /* origin is 0,0 */
           null, /* anchor is bottom center of the scaled image */
           new google.maps.Size(14, 28)
        );

        var marker = new google.maps.Marker(
            {
                position: myLatlng,
                map: map,
                icon: pinIcon,
                zoom: 6,
                flat: true,
                title: data.name
            });

        data.lat = data.coordinateLat;
        data.lng = data.coordinateLon;

        var content = document.createElement("DIV");
        content.style.width = 450;
        content.style.height = 250;


        var title = document.createElement("DIV");
        var label = '';
        title.innerHTML = '<strong>' + data.label + '</strong>';
        att = document.createAttribute("class");
        att.value = 'title';
        title.setAttributeNode(att);

        var logo = document.createElement("img");
        logo.style.width = 50;
        logo.style.height = 60;
        att = document.createAttribute("src");
        att.value = data.logomark;
        logo.setAttributeNode(att);
        att = document.createAttribute("class");
        att.value = 'logo';
        logo.setAttributeNode(att);

        var addressPhoneContainer = document.createElement("DIV");
        att = document.createAttribute("class");
        att.value = "left_box";
        addressPhoneContainer.setAttributeNode(att);

        var logoBox = document.createElement("DIV");

        logoBox.appendChild(logo);
        logoBox.appendChild(title);

        var url = data.link;
        var urllabel = data.linklabel;
        var link = '<a href="' + url + '" class="linkInfo" target="_blank">' + urllabel + '</a>';

        addressPhoneContainer.innerHTML = '<div class="spacer"></div>' + data.addressLabel + '</div>' + '<div style="margin:5px 0 0 0;">' + link + '</div>';
        if (data.phone != '') {
            addressPhoneContainer.innerHTML += '<div class="spacer"></div><div style="margin:5px 0 0 0;"><strong class="strongTrials">Details:</strong><ul>' + data.phone + '</ul></div>';
        }
        
        if (data.location != '' && data.location !=undefined) {
            addressPhoneContainer.innerHTML += '<div class="spacer"></div><div style="margin:5px 0 0 0;"><strong class="strongTrials">More Details:</strong><ul>' + data.location + '</ul></div>';
        }
        logoBox.appendChild(addressPhoneContainer);
        content.appendChild(logoBox);
        var streetview = document.createElement("DIV");
        streetview.style.width = "500px";
        streetview.style.height = "250px";
        att = document.createAttribute("class");
        att.value = "right_box";
        streetview.setAttributeNode(att);
        var infowindow = new google.maps.InfoWindow({
            content: content
        });
        infoWindowArray.push(infowindow);
        google.maps.event.addListener(marker, 'click', function ()        {
            ResetInfoWindow();
            infowindow.open(map, marker);
        });

        var markerPosition = marker.getPosition();

        if (cnt == 1) {
            infowindow.open(map, marker);
        }

        if (cnt != 1) {
            bounds.extend(new google.maps.LatLng(data.lat, data.lng));
            map.fitBounds(bounds);
        }
    }

Vedi la demo.

Scarica l’esempio completo