JavaScript: usare i marker e lo zoom delle Google Maps API

JavaScript: usare i marker e lo zoom delle Google Maps API

Nella versione 3 delle Google Maps API i marker e lo zoom sono due aspetti fondamentali. Un marker è un segnaposto che compare su una mappa di Google e lo zoom è un'azione di ingrandimento sulla mappa. In questo articolo vedremo come creare una mappa planetaria e un'indicazione per la città di Roma. Ovviamente le tecniche esposte si applicano a qualsiasi mappa. Per le coordinate mi sono servito di Geo Tag Generator.

Per prima cosa aggiungiamo le API al nostro documento:


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

Quindi aggiungiamo un contenitore HTML per la nostra mappa:


<body>
	<div id="map"></div>
</body>

Assegniamo degli stili CSS alla mappa in modo tale che riempia la finestra del browser:


html, body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

Il codice JavaScript che useremo dovrà essere inserito subito dopo le API di Google. Definiamo per prima cosa la nostra mappa planetaria:


(function() {

  var map, infoWindow;

  window.onload = function() {
   
    var options = {
      zoom: 3,
      center: new google.maps.LatLng(37.09, -95.71),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
      
    var map = new google.maps.Map(document.getElementById('map'), options);
    
    // continua
    
    
  };
  
})();

Abbiamo creato un oggetto mappa passandogli un riferimento all'elemento che lo conterrà e un oggetto letterale con le varie opzioni. Tra le opzioni vi sono lo zoom iniziale, le coordinate di latitudine e longitudine (fondamentali!) e il tipo di mappa.

Possiamo creare quindi il nostro marker e posizionarlo sulle coordinate di Roma:


var marker = new google.maps.Marker({
      position: new google.maps.LatLng(41.89052, 12.494249),
      map: map,
      title: 'Clicca qui'
});

All'oggetto Marker abbiamo passato coordinate, un riferimento alla mappa corrente e un etichetta che funziona esattamente come un attributo title dei link HTML.

Ora dobbiamo rendere il marker cliccabile, quindi gli assegniamo un gestore di eventi:


google.maps.event.addListener(marker, 'click', function() {
      
      
      var content = document.createElement('div');
      
      var p = document.createElement('p');
      p.innerHTML = 'Siamo a Roma.';
      
      var p2 = document.createElement('p');
      
      var a = document.createElement('a');
      a.innerHTML = 'Zoom';
      a.href = '#';
      
      
      a.onclick = function() {
        
       
        map.setCenter(marker.getPosition());
        
      
        map.setZoom(15);
        
       
        return false;
      };

  
      p2.appendChild(a);
      
      
      content.appendChild(p);
      content.appendChild(p2);

      if (!infoWindow) {
        infoWindow = new google.maps.InfoWindow();
      }
      
      infoWindow.setContent(content);
      
      infoWindow.open(map, marker);
      
});

Quando l'utente clicca sul marker, viene generato un oggetto InfoWindow, ossia una nuvoletta che nel nostro caso contiene due paragrafi. Il secondo di questi paragrafi contiene un link che, se cliccato, centra la mappa globale sulle coordinate del marker ed effettua uno zoom. I metodi usati sono setCenter() (centra la mappa), getPosition() (ottiene le coordinate del marker fissate in precedenza) e setZoom().

La nuvoletta, chiamata InfoWindow, si aprirà avendo come riferimento il marker all'interno della mappa globale. Il metodo setContent() crea il contenuto precedentemente costruito nel DOM.

Potete visionare l'esempio finale in questa pagina.

Ti potrebbe interessare anche

Torna su