google-maps-api-3Iniziare con google-maps-api-3


Osservazioni

Documentazione ufficiale di Google

Informazioni sugli esempi in questo argomento

  • YOUR_API_KEY deve essere sostituito dalla tua chiave API dell'applicazione. Puoi ottenere una chiave API e configurarla nella Console API di Google .

Nozioni di base

CSS

Ecco le regole CSS minime che Google consiglia di utilizzare, in un file CSS separato o all'interno di un tag di stile HTML, ad esempio <style type="text/css">...</style> .

html, body {
    height: 100%; 
    margin: 0; 
    padding: 0;
}

#map {
    height: 400px;
}
 

HTML

Google ti consiglia di dichiarare un vero DOCTYPE all'interno della tua applicazione web.

<!DOCTYPE html>
 

Utilizza il seguente tag script per caricare l'API JavaScript di Google Maps nella tua applicazione.

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>
 

Crea un elemento HTML per contenere la mappa.

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

JavaScript

Ecco un esempio molto semplice che mostra una mappa e un marker .

function initialize() {

    // Create a LatLng object
    // We use this LatLng object to center the map and position the marker
    var center = new google.maps.LatLng(50,0);

    // Declare your map options
    var mapOptions = {
        zoom: 4,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Create a map in the #map HTML element, using the declared options
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    // Create a marker and place it on the map
    var marker = new google.maps.Marker({
        position: center,
        map: map
    });
}
 

Esempio completo

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #map {
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            function initialize() {

                // Create a LatLng object
                // We use this LatLng object to center the map and position the marker
                var center = new google.maps.LatLng(50, 0);

                // Declare your map options
                var mapOptions = {
                    zoom: 4,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // Create a map in the #map HTML element, using the declared options
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                // Create a marker and place it on the map
                var marker = new google.maps.Marker({
                    position: center,
                    map: map
                });
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
    </body>

</html>
 

dimostrazione

Demo JSFiddle

Ulteriori informazioni

Si prega di leggere le osservazioni di questo argomento per ulteriori informazioni.

Inserisci il pin dell'utente nella mappa.


Nota , se non hai familiarità con l'API di google maps, puoi leggere l'esempio precedente (basi) per comprendere questo piccolo esempio.


  • Innanzitutto, inizializza la mappa .

Puoi aggiungere l'elemento di una mappa nel tuo codice HTML e un morso di CSS come questo:

<!DOCTYPE html>
<html>
<head>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
 

Ora devi aggiungere la libreria di google maps al tuo codice con uno script balise come questo:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
 

Puoi riposizionare YOUR_API_KEY nel codice con una chiave API di Google. È un link per ottenere una chiave.

Successivamente, devi scrivere nel codice una funzione che funge da callback (o una funzione di inizializzazione) per la tua mappa. Qui, aggiungiamo solo una piccola funzione che puoi trovare su google qui :

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
 

Ora hai normalmente una mappa di base sullo schermo. Puoi trovare il codice completo su google .


  • In secondo luogo, trova la posizione dell'utente.

Per richiedere la posizione dell'utente, c'è una funzione molto semplice che è fornita dal navigatore:

navigator.geolocation.getCurrentPosition(showPosition);
 

Si noti che questa funzione accetta un parametro. È una funzione da chiamare se la geolocalizzazione ha successo.

Dobbiamo creare questa funzione. :)

function showPosition(position) {
    alert (position);    
}
 

Questa funzione è molto semplice e dovremo aggiornarla dopo per tracciare un marker sulla posizione dell'utente.

La funzione di geolocalizzazione che usiamo qui è molto semplice. Puoi avere la documentazione completa su w3schools .

A questo punto il codice si presenta così:

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
      * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map;
    navigator.geolocation.getCurrentPosition(showPosition);
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    }
    function showPosition(position) {
      console.log(position);
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>
 

  • E in terzo luogo, visualizza la posizione dell'utente sulla mappa con un indicatore.

Per visualizzare un marker sulla mappa puoi utilizzare la funzione nell'esempio "Nozioni di base":

// Create a marker and place it on the map
var marker = new google.maps.Marker({
    position: position,
    map: map
});
 

Non descriverò in dettaglio queste righe di codici in modo molto preciso. A questo punto potresti appena aver creato un marker con questo codice: new google.maps.Marker({}); , si passa le 'opzioni dei marker' inserire gli abbracci. Puoi consultare la documentazione di google qui .

Si noti inoltre che è possibile specificare la posizione del marker molto facilmente con il parametro position.

Ora dobbiamo modificare la funzione showPosition .

Puoi accedere semplicemente al lat e al lng della posizione variabile in questo modo:

  var markerPosition={};
  markerPosition.lat=position.coords.latitude;
  markerPosition.lng=position.coords.longitude;
 

In questo modo, google capisce come accedere semplicemente al valore lat and lng.

Ora aggiungiamo per modificare la funzione showPosition per aggiungere un marker nella posizione dell'utente.

function showPosition(position) {
    var markerPosition={};
    markerPosition.lat=position.coords.latitude;
    markerPosition.lng=position.coords.longitude;
    // Create a marker and place it on the map
    var marker = new google.maps.Marker({
        position: markerPosition,
        map: map
    });
}
 

  • Infine, il tuo codice dovrebbe assomigliare a questo:
<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map;
    navigator.geolocation.getCurrentPosition(showPosition);
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    }
    function showPosition(position) {
      var markerPosition={};
      markerPosition.lat=position.coords.latitude;
      markerPosition.lng=position.coords.longitude;

      // Create a marker and place it on the map
      var marker = new google.maps.Marker({
        position: markerPosition,
        map: map
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>