Wat is Google Maps?
Google Maps is een Google API
Google Fonts is een Google API
Google Charts is een Google API
Leer hoe u Google Maps aan uw webpagina toevoegt.
Mijn eerste Google Map
Begin met een eenvoudige webpagina.
Voeg een <div>-element toe waar u de kaart wilt weergeven en stel de grootte van de kaart in:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:100%;height:400px;">My map will go here</div>
</body>
<html>
Voeg een JavaScript-functie toe om de kaart weer te geven:
Voorbeeld
function myMap() {
var mapCanvas =
document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.2),
zoom:
10
};
var map = new google.maps.Map(mapCanvas,
mapOptions);
}
De variabele mapCanvas is het HTML-element van de kaart.
De variabele mapOptions definieert de eigenschappen voor de kaart.
De eigenschap centreren geeft aan waar de kaart moet worden gecentreerd (met behulp van breedte- en lengtecoördinaten).
De eigenschap zoom specificeert het zoomniveau voor de kaart (probeer te experimenteren met het zoomniveau).
Het google.maps.Map- object wordt gemaakt met mapCanvas en mapOptions als parameters.
Voeg ten slotte de Google API toe
De functionaliteit van de kaart wordt geleverd door een JavaScript-bibliotheek bij Google:
Voorbeeld
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
Google Maps-zelfstudie
Lees meer over Google Maps in onze Google Maps-zelfstudie .