Come includere le mappe di google in una pagina web

Tramite le API di Google Maps è possibile includere le mappe di google all'interno di una pagina html.

Il tutto è fattibile con pochi passaggi.

• includere il riferimento alle API
• includere l'array per i marker
• includere le funzioni [tqag]JavaScript[/tag] comuni
• includere il palceholder per la mappa
• includere l'html con i div nascosti che useremo come popup

Primo includere le API

HTMLCopia

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

Secondo lo script con l'array per i marker

JavaScriptCopia

/* parte da generare dinamicamente via codice
   * dati variabili [id, coords]
   */
    var neighborhoods = [
      ["popup1", 45.643596, 9.137625],
      ["popup2", 45.584006, 9.273014],
      ["popup0", 45.812032, 9.085615],
      ["popup3", 45.463681, 9.188171]
    ];

Terzo lo script comune

JavaScriptCopia

/* parte comune - by sgart.it */
 var map;
 var markers = [];
 var iterator = 0;
 var infowindow;
    
 $(document).ready(function(){
     var bounds = new google.maps.LatLngBounds();
     //find center
     var latMin = 10000;
     var latMax = -1000;
     var lngMin = 10000;
     var lngMax = -1000;
     for (var i = 0; i < neighborhoods.length; i++) {
       var item = neighborhoods[i];
       var lat = item[1];
       if(lat < latMin) latMin = lat;
       if(lat > latMax) latMax = lat;
       var lng = item[2];
       if(lng < lngMin) lngMin = lng;
       if(lng > lngMax) lngMax = lng;
        //find max rectangular dimension
       bounds.extend(new google.maps.LatLng(lat, lng));
     }
     var centerLat = (latMax + latMin) / 2;
     var centerLng = (lngMax + lngMin) / 2;
     var mapcenter = new google.maps.LatLng(centerLat, centerLng);
 
     //draw map
   var mapOptions = {
     zoom: 10,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     center: mapcenter
   };
 
   map = new google.maps.Map(
       document.getElementById("map_canvas"),
       mapOptions);
 
   //set visible area - automatic zoom
   if (neighborhoods.length > 1) { 
       map.fitBounds(bounds); 
   } else if (neighborhoods.length == 1) { 
     map.setCenter(bounds.getCenter()); 
     map.setZoom(14); 
   } 
    
	//set windows for popup
    infowindow = new google.maps.InfoWindow({
           content: "?",
           maxWidth: 200
       }); 
	
   //set markers with timeout
   setTimeout(function() { drop(); }, 500);
   //or set marker immediatly
   //drop();
});
 
 function drop() {
   for (var i = 0; i < neighborhoods.length; i++) {
     setTimeout(function() { addMarker(); }, i * 200);
   }
 }
 
 function addMarker() {
   var item = neighborhoods[iterator];
   var id = item[0];
   var coord = new google.maps.LatLng(item[1], item[2]);
   //add marker
   var marker = new google.maps.Marker({
     position: coord,
     map: map,
     flat: false,
     draggable: false,
     animation: google.maps.Animation.DROP,
     title: id
   });
   markers.push(marker);
   //add popup event listener
   google.maps.event.addListener(marker, 'click', function () {
       var id = this.title;
       var contentString = $('#' + id).html();
       if (contentString != null) {
           //show popup      
           infowindow.setContent(contentString);
           infowindow.open(map, marker);
       }
   });     
   iterator++;
 }
 /* parte comune fine */

Quarto il placeholder per la mappa

HTMLCopia

<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>

Infine i div nacosti per i popup

HTMLCopia

<!-- popup  da generare dinamicamente via codice-->
<div id="popup0" style="display:none">Prova <br />testo 1</div>
<div id="popup1" style="display:none">Prova <h2>testo</h2> 2</div>
<div id="popup2" style="display:none">Prova <h3>testo</h3> 3</div>
<div id="popup3" style="display:none">Prova testo 4</div>
<!-- popup fine-->

E' possibile fare una variante, ovvero non nascondere i div e visualizzare l'elenco dei punti visualizzati facendo in modo che cliccando sugli stessi venga visualizzato il popup.
Sostituisci i div con questo:

HTMLCopia

<!-- popup  da generare dinamicamente via codice-->
<div style="border: 1px solid black";>
    <div id="popup0" style="cursor:pointer;" onclick="showPopupMap(this)">Prova testo 1</div>
    <div id="popup1" style="cursor:pointer;" onclick="showPopupMap(this)">Prova testo 2</div>
    <div id="popup2" style="cursor:pointer;" onclick="showPopupMap(this)">Prova testo 3</div>
    <div id="popup3" style="cursor:pointer;" onclick="showPopupMap(this)">Prova testo 4</div>
</div>
<!-- popup fine-->

e aggiungi questa funzione javascript nella parte cumune:

JavaScriptCopia

function showPopupMap(obj) {
  var m = null;
  var id = obj.id;
  for (var i = 0; i < markers.length; i++) {
    //search marker
    if (markers[i].title == id) {
      m = markers[i];
      break;
    }
  }
  if (m != null) {
    //get content
    var contentString = $('#' + id).html();
    if (contentString != null) {
      //show popup
      infowindow.setContent(contentString);
      infowindow.open(map, m);
    }        
  }
}