Latest web development tutorials

Google Maps Basis

Erstellen Sie eine einfache Google Maps

Nun wollen wir eine einfache Google Maps erstellen.

Das Folgende ist eine Grafik, die die Google Maps London zeigt:

Beispiele

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

Versuchen »

Beispiele für analytische

Im obigen Beispiel erstellen wir einen Prozess der Google-Karte zu lösen.

Warum sollte die Anwendung HTML5 erklären?

<!DOCTYPE html>

Die meisten Browser verwenden, um die "Standardmodell" von HTML5 die Seite Dokument-Rendering, was bedeutet, dass die Anwendung mit allen gängigen Browsern kompatibel ist.

Darüber hinaus, wenn es keine DOCTYPE-Tag ist, verwenden Sie den Browser, den Sie den Promiscuous-Modus (Quirks-Modus) für den Seiteninhalt zu machen.

Tipp: Es sollte in der CSS , dass einige "Promiscuous Mode" angemerkt werden , und Sie können nicht den Standard - Modus verwenden.In einer bestimmten Anwendung müssen alle von den Eltern Blockelemente erben auf einem Prozentsatz der Größe basiert. Wenn Sie nicht über die Größe des Moduls in der übergeordneten angeben, wird der Standardwert 0 x 0 Pixel. Wenn Sie Prozentsätze verwenden möchten, können im <style> -Tag deklariert werden, wie folgt:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Diese Karte zeigen Stil Erklärung Modul (GoogleMap) sollte HTML Höhe von 100% betragen.

In Google Maps API Key

Im folgenden Beispiel wird das erste <script> -Tag in Google Maps API enthalten sein müssen:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Die Google-generierte API - Schlüssel inSchlüsselparameter gesetzt(key= YOUR_API_KEY).

Die Sensorparameter erforderlich ist , wird der Parameter verwendet , um anzuzeigen , ob die Anwendung eines Sensors (ähnlich wie die GPS - Navigation) verwendet den Standort des Benutzers zu lokalisieren.Parameterwerte können auf true oder false gesetzt werden.

HTTPS

Wenn Ihre Anwendung sichere HTTP (HTTPS: HTTP Secure) Anwendung können Sie HTTPS verwenden, um die Google Maps API zu laden:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Asynchrone Laden

In ähnlicher Weise können wir auch die Google Maps API laden, nachdem die Seite vollständig geladen ist.

Das folgende Beispiel verwendet window.onload voll beladen zu implementieren, wenn die Seite Google Maps geladen. Loadscript () Funktion erstellt die Google Maps API laden <script> Tag. Auch am Ende des Etiketts an die Callback = Parameter initialisieren, initialisieren () wird ausgeführt, nachdem das API vollständig als Callback-Funktion geladen wird:

Beispiele

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

Versuchen »

Custom Map Properties

Bevor die Karte zu initialisieren, müssen wir ein Map-Objekt zu erstellen Eigenschaftskarte Eigenschaften zu definieren:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Zentrum (Mitte)

-Center Attribut gibt die Kartenmitte, die durch Koordinaten (Breitengrad, Längengrad) einen zentralen Punkt auf der Karte zu erstellen.

Zoom (Zoom Series)

Zoom-Karte Zoom-Eigenschaft gibt die Anzahl der Stufen. Zoom: 0 zeigen das ganze Ausmaß die gesamte Karte der Erde.

MapTypeId (Erstprüfung Karte)

mapTypeId type-Attribut gibt die Anfangs Karte.

mapTypeId umfasst die folgenden vier Typen:

  • google.maps.MapTypeId.HYBRID: Satellitenbilder zeigen die Hauptstraße der transparenten Schicht
  • google.maps.MapTypeId.ROADMAP: Anzeige der normalen Straßenkarte
  • google.maps.MapTypeId.SATELLITE: Show Satellitenbild
  • google.maps.MapTypeId.TERRAIN: zeigt Karten mit physikalischen Eigenschaften (wie Topographie und Vegetation) von

Wo Google Maps angezeigt werden

Typischerweise wird in Google Maps <div> Element verwendet:

<div id="googleMap" style="width:500px;height:380px;"></div>

Hinweis: Die Größe derKarte wird gesetzt Div , um die Größe der Karte zu zeigen, so können wir die Größe der Karte in der <div> Element festgelegt.

Erstellen Sie ein Map-Objekt

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

Der obige Code verwendet den Parameter (mapProp) im <div> Element (id ist googleMap) eine neue Karte.

Tipp: Wenn Siemehrere Kartenseiten erstellen möchten, müssen Sie nur eine neue Map - Objekte können hinzufügen müssen sein.

Das folgende Beispiel definiert vier Instanzkarten (Karten vier verschiedene Kartentypen verwenden):

Beispiele

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

Versuchen »

Karte wird geladen

Kartenfenster das Objekt nach dem Laden durch Ausführen der Funktion initialize () initialisiert werden, die sicherstellt, dass die Seite vollständig auf, bevor das Laden der Google Maps geladen ist:

google.maps.event.addDomListener(window, 'load', initialize);