google-maps-api-3Aan de slag met google-maps-api-3


Opmerkingen

Officiële Google-documentatie

Over de voorbeelden in dit onderwerp

  • YOUR_API_KEY moet worden vervangen door uw eigen applicatie-API-sleutel. U kunt een API-sleutel verkrijgen en deze configureren in de Google API-console .

Basics

CSS

Hier zijn de minimale CSS-regels die Google u adviseert te gebruiken, in een afzonderlijk CSS-bestand of in een HTML-stijltag, bijvoorbeeld <style type="text/css">...</style> .

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

#map {
    height: 400px;
}
 

HTML

Google beveelt aan dat u een echte DOCTYPE binnen uw webtoepassing aangeeft.

<!DOCTYPE html>
 

Gebruik de volgende script-tag om de Google Maps JavaScript-API in uw applicatie te laden.

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

Maak een HTML-element om de kaart vast te houden.

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

JavaScript

Hier is een heel eenvoudig voorbeeld met een kaart en een markering .

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

Compleet voorbeeld

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

demonstratie

JSFiddle demo

Meer informatie

Lees de opmerkingen van dit onderwerp voor meer informatie.

Plaats de pin van de gebruiker op de kaart.


Let op , als u niet bekend bent met de Google Maps API, kunt u het voorgaande voorbeeld (basis) lezen om dit kleine voorbeeld te begrijpen.


  • Initialiseer eerst de kaart .

U kunt een kaartelement toevoegen aan uw HTML-code en een hap CSS zoals deze:

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

Nu moet u de Google Maps-bibliotheek toevoegen aan uw code met een balise-script als volgt:

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

U kunt UW_API_KEY in de code verplaatsen door een Google API-sleutel. Het is een link om een sleutel te krijgen.

Vervolgens moet u in uw code een functie opschrijven die dient als een callback (of een functie van initialisatie) voor uw kaart. Hier voegen we slechts een kleine functie heks u kunt vinden op google hier :

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

Nu heb je normaal gesproken een basiskaart op je scherm. U kunt de volledige code vinden op Google .


  • Ten tweede, zoek de gebruikerspositie.

Om de gebruikerspositie op te vragen, is er een zeer eenvoudige functie die door de navigator wordt geboden:

navigator.geolocation.getCurrentPosition(showPosition);
 

Merk op dat deze functie een parameter accepteert. Het is een functie om aan te roepen als de geolocatie succesvol is.

We moeten deze functie maken. :)

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

Deze functie is heel eenvoudig en we moeten deze daarna bijwerken om een marker op de gebruikerspositie te plotten.

De functie van de geolocatie die we hier gebruiken is heel eenvoudig. U kunt de volledige documentatie op w3schools hebben .

Op zijn punt ziet de code er als volgt uit:

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

  • En ten derde, geef de positie van de gebruiker op de kaart weer met een marker.

Om een markering op de kaart weer te geven, kunt u de functie in het voorbeeld 'basics' gebruiken:

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

Ik zal deze coderegels niet heel nauwkeurig beschrijven. Dat kan alleen maar wanneer u een marker met deze code maakt: new google.maps.Marker({}); , passeer je de 'marker-opties' en voer je de omhelzingen in. U kunt de Google-documentatie hier raadplegen .

Merk ook op dat u de positie van de marker heel gemakkelijk kunt opgeven met de parameter position.

Nu moeten we de functie showPosition wijzigen.

U kunt eenvoudig toegang krijgen tot de lengte en breedte van de variabele positie als volgt:

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

Op deze manier begrijpt Google hoe u eenvoudig toegang krijgt tot de lat- en lng-waarde.

Nu voegen we toe om de showPosition functie te wijzigen om een marker in de gebruikerspositie toe te voegen.

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

  • Ten slotte moet uw code er als volgt uitzien:
<!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>