Was ist GoogleMaps?
Google Maps ist eine Google-API
Google Fonts ist eine Google-API
Google Charts ist eine Google-API
Erfahren Sie, wie Sie Google Maps zu Ihrer Webseite hinzufügen.
Meine erste Google-Karte
Beginnen Sie mit einer einfachen Webseite.
Fügen Sie ein <div>-Element an der Stelle hinzu, an der die Karte angezeigt werden soll, und legen Sie die Größe der Karte fest:
Beispiel
<!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>
Fügen Sie eine JavaScript-Funktion hinzu, um die Karte anzuzeigen:
Beispiel
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);
}
Die mapCanvas- Variable ist das HTML-Element der Karte.
Die Variable mapOptions definiert die Eigenschaften für die Karte.
Die Center -Eigenschaft gibt an, wo die Karte zentriert werden soll (unter Verwendung von Breiten- und Längenkoordinaten).
Die Zoom -Eigenschaft gibt die Zoomstufe für die Karte an (versuchen Sie, mit der Zoomstufe zu experimentieren).
Das Objekt google.maps.Map wird mit mapCanvas und mapOptions als Parameter erstellt.
Fügen Sie schließlich die Google-API hinzu
Die Funktionalität der Karte wird durch eine JavaScript-Bibliothek bereitgestellt, die sich bei Google befindet:
Beispiel
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
Google Maps-Tutorial
Erfahren Sie mehr über Google Maps in unserem Google Maps Tutorial .