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.