Google Maps API: come creare una mappa su un sito web

Come tutti sanno, Google è un'azienda mondiale che ha creato e continua a creare molte novità e servizi per il web. Per gli sviluppatori, inoltre, ha provveduto a creare API per integrare questi servizi base in altre applicazioni e app per smartphone. In questo articolo, in particolare, vedremo come integrare le API di Google Maps per creare una mappa sul nostro sito con molte opzioni e segnaposto.

Innanzitutto creiamo nell'HTML del nostro sito un div con un id in questo modo:

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

In questo div apparirà la mappa di Google Maps. Andiamo aventi modificando e aggiungendo determinate opzioni nella vista della mappa, nel nostro caso inseriremo un marker:

<script type="text/javascript">
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 4, //impostiamo lo zoom della mappa
            center: new google.maps.LatLng(40.867096, 11.884805) //centriamo la mappa sulle coordinate impostate
          };
          map = new google.maps.Map(document.getElementById('map'),
              mapOptions);
          var LatLng = new google.maps.LatLng(42.349377, 13.348464);
          var beachMarker = new google.maps.Marker({ //definiamo un nuovo segnaposto o marker nella posizione LatLng
                position: LatLng,
                map: map
          });
        }

        google.maps.event.addDomListener(window, 'load', initialize); // carichiamo il tutto
     </script>

Ricordiamoci che prima di customizzare la nostra mappa dovremo importare le API di Google Maps prima di ogni codice, in questo modo:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Questo è un primo esempio di customizzazione, ma possiamo anche piazzare più marker sempre nello stesso modo ovviamente definendo più variabili di coordinate diverse. Possiamo anche cambiare l'icona del nostro segnaposto, mettendo ad esempio il logo di un'azienda, in questo modo:

var image ={
    url:'images/beachflag.png',
    // Questo marker sarà largo 20 px e sarà alto 32px.
    size:new google.maps.Size(20,32),
    origin:new google.maps.Point(0,0)}

var beachMarker = new google.maps.Marker({ //definiamo un nuovo segnaposto o marker nella posizione LatLng
                position: LatLng,
                map: map,
                icon: image

});

In questo modo avremo una bandierina come simbolo del marker sulla mappa. Potremmo anche mettere del testo informativo al click sulla bandierina, in questo modo:

var marker = new google.maps.Marker({
      position: Latlng,
      map: map,
      title: 'Italia(L'Aquila)'
  });

Il codice proposto è molto semplice, ma per altre funzioni più dettagliate vi rimando al sito dei Google Developers qui in cui ci sono molte altre opzioni, come disegnare sulle mappe oppure creare delle ombre o poligoni colorati.