Google Maps - Guida introduttiva

Cosa sono le Google Maps?

Google Maps è un servizio di mappe web gratuito di Google che fornisce vari tipi di informazioni geografiche. Utilizzando Google Maps, si può.

Cerca luoghi o ottieni indicazioni stradali da un luogo a un altro.
Visualizza e naviga attraverso le immagini panoramiche orizzontali e verticali a livello stradale di varie città in tutto il mondo.
Ottieni informazioni specifiche come il traffico in un punto particolare.

Google Maps fornisce un'API tramite la quale è possibile personalizzare le mappe e le informazioni visualizzate su di esse. Questo capitolo spiega come caricare una semplice mappa di Google sulla tua pagina web utilizzando HTML e JavaScript.

Procedura per caricare la mappa su una pagina Web

Segui i passaggi indicati di seguito per caricare una mappa sulla tua pagina web -

Passaggio 1: crea una pagina HTML

Crea una pagina HTML di base con i tag head e body come mostrato di seguito:

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Passaggio 2: carica l'API

Carica o includi l'API di Google Maps utilizzando il tag script come mostrato di seguito -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Passaggio 3: creare il contenitore

Per contenere la mappa, dobbiamo creare un elemento contenitore, generalmente il tag <div> (un contenitore generico) viene utilizzato per questo scopo. Crea un elemento contenitore e definisci le sue dimensioni come mostrato di seguito:

<div id = "sample" style = "width:900px; height:580px;"></div>

Passaggio 4: opzioni della mappa

Prima di inizializzare la mappa, dobbiamo creare un file mapOptionsoggetto (viene creato proprio come un letterale) e imposta i valori per le variabili di inizializzazione della mappa. Una mappa ha tre opzioni principali, vale a dire,centre, zoom, e maptypeid.

centre- Sotto questa proprietà, dobbiamo specificare la posizione in cui vogliamo centrare la mappa. Per passare la posizione, dobbiamo creare un fileLatLng oggetto passando la latitudine e la longitudine della posizione richiesta al costruttore.
zoom - Sotto questa proprietà, dobbiamo specificare il livello di zoom della mappa.
maptypeid- Sotto questa proprietà, dobbiamo specificare il tipo di mappa che vogliamo. Di seguito sono riportati i tipi di mappe fornite da Google:
- ROADMAP (normale, mappa 2D predefinita)
- SATELLITE (mappa fotografica)
- HYBRID (combinazione di due o più altri tipi)
- TERRENO (mappa con montagne, fiumi, ecc.)

All'interno di una funzione, diciamo, loadMap(), creare l'oggetto mapOptions e impostare i valori richiesti per center, zoom e mapTypeId come mostrato di seguito.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Passaggio 5: creare un oggetto mappa

È possibile creare una mappa istanziando la classe JavaScript chiamata Map. Durante la creazione di un'istanza di questa classe, è necessario passare un contenitore HTML per contenere la mappa e le opzioni della mappa per la mappa richiesta. Crea un oggetto mappa come mostrato di seguito.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Passaggio 6: carica la mappa

Infine, carica la mappa chiamando il metodo loadMap () o aggiungendo un listener DOM.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Esempio

L'esempio seguente mostra come caricare la roadmap della città denominata Vishakhapatnam con un valore di zoom di 12.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output: