Google Maps API Hallo Weltbeispiel
Ein einfacher Hallo-Welt-Leitfaden zum Anzeigen von Google Maps auf einer Webseite überGoogle Maps Javascript API v3.
In diesem Tutorial zeigen wir Ihnen, wie Sie eine Karte mit dem Mittelpunkt „Malim Nawar, Malaysia“ (meine Heimatstadt) anzeigen und mithilfe der Markierung (kleines Symbol) den Ort auf der Karte identifizieren.
Vollständiges Beispiel…
Google Map Hello World Example
Siehe folgende Erklärung.
1. Wo soll die Google-Karte angezeigt werden?
Google Map wird auf der Element-ID „map_container“ angezeigt.
//... //...
2. Laden Sie die Google Maps-API
Um die Google Maps-API zu verwenden, müssen Sie nur das folgende JavaScript in Ihre Webseite einbeziehen.
What is sensor?
Sensor (normalerweise Handy-Sensor) wird verwendet, um den Standort des Benutzers zu bestimmen.
3. Breiten-und Längengrad
Jeder Ort auf der Erde kann durch Breiten- und Längengrade oder sogenannte „geographic coordinates“ dargestellt werden. Weitere Erläuterungen finden Sie in diesenwiki geographic coordinate.
Note
Ich persönlich verstehe nicht wirklich, wie Breiten- und Längengrade funktionieren. Einfach ausgedrückt: Denken Sie nur an den Breitengrad mit der y-Koordinate und den Längengrad mit der x-Koordinate. Würde mich freuen, wenn jemand mehr darüber erklärt :)
In diesem Beispiel können Sie den Breiten- und Längengrad von „Malim Nawar“ über dieselatitude and longitude finder website ermitteln. Geben Sie dann Ihren Breiten- und Längengrad wie folgt ein: „var latlng = new google.maps.LatLng(Latitude, Longitude)“.
Geocoding
Das Konvertieren einer Adresse in "Breiten- und Längengrad" wird als Geokodierung bezeichnet. In den nächsten Tutorials werden wir weitere Geokodierungsbeispiele bereitstellen.
4. Konfigurieren Sie die Google Maps-Optionen
Die konfigurierbaren Werte sind selbsterklärend. In dieser Referenz finden Sie eine Liste der unterstütztenGoogle map options.
Zeigen Sie die Google-Karte in der HTML-Element-ID "map_container" an.
function loadMap() {
//...
var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
//...
}
Erstellen Sie eine Markierung (kleines Symbol), konfigurieren Sie die Anzeigeposition und das vordefinierte Meldungsfeld, wenn Sie mit der Maus über die Markierung fahren.
function loadMap() {
//...
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"my hometown, Malim Nawar!"
});
//...
}
5. Laden Sie Google Maps
Letzter Schritt: Laden Sie die Funktion einfach über body onload.