Come inserire la mappa di google sul nostro sito

Vediamo come inserire una mappa personalizzata di google sul nostro sito internet, con l’utilizzo delle API e Javascript

Le mappe di google permettono una vasta prospettiva di personalizzazione. Sono tra le più diffuse disponibili sulla rete, e già molti siti le utilizzano.

Una più professionale implementazione (rispetto al classico iframe fornito da google) è quella di utilizzare le My Maps. A differenza dell’iframe, il servizio My Maps dispone di molteplici funzionalità, tra cui la personalizzazione del Marker, calcolare la distanza tra due punti, inserire più Marker oppure semplicemente individuare un punto sulla mappa.

In questo articolo vediamo come implementare una mappa che mostra un punto preciso utlizzando Javascript

Guarda L’esempio

<!DOCTYPE html>
<html>

    <head>      
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">

            var mappa;    //definiamo la mappa
            
            var initialize = function() {

                // impostiamo la latitudine e longitudine.
                var posizione = new google.maps.LatLng(45.462783,8.886711);

                // imposta le opzioni di visualizzazione
                var opzioni = { zoom: 17,
                                center: posizione,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                              };

                // creiamo l'oggetto mappa assegnandolo all'oggetto con id mappa
                mappa = new google.maps.Map(document.getElementById('mappa'), opzioni);

                // creiamo il marker
                var marker = new google.maps.Marker({ position: posizione,
                            map: mappa, 
                            title: 'Il Mio Punto' });

            }

            window.onload = initialize;

        </script>
                       
    </head>
    <body>
        <div id="mappa" style="width: 640px; height: 400px; float:left"></div>
    </body>
</html>

Analizziamo il codice:

Viene effettuata una chiamata al sito di google maps caricandone le API

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

Definiamo il nostro punto mediante le coordinate di latitudine e longitudine.

var posizione = new google.maps.LatLng(45.462783,8.886711);

Impostiamo alcune opzioni, in questo caso gli vengono passate le informazioni circa:
lo zoom, la posizione iniziale, quale tipo di mappa visualizzare.

var opzioni = { zoom: 17,
     center: posizione,
     mapTypeId: google.maps.MapTypeId.ROADMAP
}; 

Creiamo l’oggetto mappa, assegnandolo ad un oggetto posizionato tra il tag body

mappa = new google.maps.Map(document.getElementById('mappa'), opzioni);

Creiamo il marcatore principale, ovvero quell’immagine che indica sulla mappa il punto preciso di dove ci troviamo.

var marker = new google.maps.Marker({ position: posizione,
     map: mappa, 
     title: 'Il Mio Punto' });

All’interno del tag body, creiamo il nostro div che ha come ID lo stesso utilizzato nella funzione che crea l’oggetto mappa  ( in questo caso si chiama mappa )

<div id="mappa" style="width: 640px; height: 400px; float:left"></div>