google-maps-api-3Erste Schritte mit google-maps-api-3


Bemerkungen

Offizielle Google-Dokumentation

Über die Beispiele in diesem Thema

  • YOUR_API_KEY muss durch Ihren eigenen Anwendungs-API-Schlüssel ersetzt werden. Sie können einen API-Schlüssel abrufen und in der Google API Console konfigurieren.

Grundlagen

CSS

Hier sind die Mindest CSS - Regeln , die Google berät Sie zu verwenden, in einer separaten CSS - Datei oder in einem HTML - Stil Tag, zB <style type="text/css">...</style> .

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

#map {
    height: 400px;
}
 

HTML

Google empfiehlt, dass Sie in Ihrer Webanwendung einen echten DOCTYPE .

<!DOCTYPE html>
 

Verwenden Sie das folgende Skripttag, um die Google Maps JavaScript-API in Ihre Anwendung zu laden.

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

Erstellen Sie ein HTML-Element für die Karte.

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

JavaScript

Hier ist ein sehr einfaches Beispiel, das eine Karte und eine Markierung anzeigt.

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
    });
}
 

Vollständiges Beispiel

<!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>
 

Demo

JSFiddle Demo

Mehr Info

Bitte lesen Sie die Anmerkungen zu diesem Thema, um weitere Informationen zu erhalten.

Platzieren Sie die PIN des Benutzers in der Karte.


Beachten Sie , wenn Sie nicht vertraut mit dem Google Maps - API sind, können Sie den Präzedenzfall Beispiel (Grundlagen) lesen , um dieses kleine Beispiel zu verstehen.


  • Initialisieren Sie zuerst die Karte .

Sie können ein Map-Element in Ihren HTML-Code und einen Biss an CSS wie folgt hinzufügen:

<!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>
 

Jetzt müssen Sie die Google Maps-Bibliothek mit einem Balise-Skript wie folgt in Ihren Code einfügen:

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

Sie können YOUR_API_KEY durch einen Google-API-Schlüssel in den Code einfügen. Das ist ein Link , um einen Schlüssel zu bekommen.

Als Nächstes müssen Sie in Ihren Code eine Funktion schreiben, die als Callback (oder eine Initialisierungsfunktion) für Ihre Map dient. Hier fügen wir nur eine kleine Funktion hinzu, die Sie hier bei Google finden können :

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

Jetzt haben Sie normalerweise eine Basiskarte auf Ihrem Bildschirm. Den vollständigen Code finden Sie bei Google .


  • Zweitens finden Sie die Benutzerposition.

Um die Benutzerposition anzufordern, gibt es eine sehr einfache Funktion, die vom Navigator bereitgestellt wird:

navigator.geolocation.getCurrentPosition(showPosition);
 

Beachten Sie, dass diese Funktion einen Parameter akzeptiert. Es ist eine Funktion, die aufgerufen wird, wenn die Standortbestimmung erfolgreich ist.

Wir müssen diese Funktion erstellen. :)

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

Diese Funktion ist sehr einfach und muss nach dem Update aktualisiert werden, um eine Markierung an der Benutzerposition zu zeichnen.

Die Geolocation-Funktion, die wir hier verwenden, ist sehr einfach. Sie können die vollständige Dokumentation über w3schools erhalten .

An seiner Stelle sieht der Code so aus:

<!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>
 

  • Und drittens zeigen Sie die Position des Benutzers auf der Karte mit einer Markierung an.

Um eine Markierung auf der Karte anzuzeigen, können Sie die Funktion im Beispiel 'Grundlagen' verwenden:

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

Ich werde diese Codezeilen nicht genau beschreiben. Sie können jetzt bis jetzt, wenn Sie eine Markierung mit diesem Code erstellen: new google.maps.Marker({}); , übergeben Sie die "Markierungsoptionen", um die Umarmungen einzugeben. Sie können die Google-Dokumentation hier einsehen.

Beachten Sie auch, dass Sie die Position des Markers sehr einfach mit dem Positionsparameter festlegen können.

Jetzt müssen wir die showPosition Funktion ändern.

Sie können einfach auf die Länge und Länge der Variablenposition wie folgt zugreifen:

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

So versteht Google, wie einfach auf den Lat- und Lng-Wert zugegriffen werden kann.

Jetzt fügen wir die showPosition Funktion hinzu, um eine Markierung an der Benutzerposition hinzuzufügen.

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
    });
}
 

  • Schließlich sollte Ihr Code so aussehen:
<!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>