Erstellung einer Google Map
Einleitung:
Für die Einbindung einer Google Map wird JavaScript, HTML und die Google Map API benötigt.
Da zum 01.03.2013 die Google Map API 2.0 offiziell abgeschaltet wird sollten nun auch die letzten auf die Google Map API 3.0 upgraden.
Für eine einfache Map Einbindung wird nur die Google Map API 3.0 benötigt diese kann direkt über die Goolge Server eingebunden werden.
Der entsprechende JavaScript Aufruf ist:
<script type=“text/javascript“ src=“https://maps.google.com/maps/api/js?sensor=false&language=de“></script>
Der Parameter language steht für die Sprache. In diesem Fall de für Deutsch. Der Parameter Sensor steht für eine aktive Ortungsprüfung. In diesem Fall false da keine Endnutzer Ortung gewünscht ist. Sollte dies der gewünscht werden, diesen Wert auf true setzten oder den Parameter entfernen. Im nächsten Schritt wird ein HTML DIV definiert der die erzeugte Map enthalten wird. Der entsprechende Eintrag im HTML Dokument ist beispielsweise:
<div class=“gmap“ id=“google_map“></div>
Nun benötigen wir die eigentliche erstellung unserer Google Karte. Hierzu schreiben wir uns eine JavaScript Anweisung und definieren die Google Map.
<script type=“text/javascript“>// <![CDATA[
/* zu erst werden die Optionen im JSON Format definiert */
var myOptions = {
zoom: 12, // Zoom Stufe der Karte
mapTypeId: google.maps.MapTypeId.ROADMAP // Ausgabe art der Karte ( Straßenkarte / Satellitenkarte / Terrain Karte / Hybrid )
};
/* anschließend wird das Eigentlich Karten Objekt erstellt*/
var myMap = new google.maps.Map(
document.getElementById(„google_map“), // Die ID des HTML DIV in dem die Karte gezeigt werden soll.
myOptions // die oben definierten Optionen. Diese könneten auch direkt hier übergeben werde.
);
// Die Position für New York wäre die folgende
var latlong = new google.maps.LatLng(40.7143528,-74.0059731);
/* nun muss noch das Zentrum der Karte auf die Position gesetzt werden */
myMap.setCenter(latlong);
// ]]></script>
Nun wird unser Div mit der Karte ersetzt.
Koordinaten können zum Beispiel über die unten genannte Webseite gefunden werden.
http://www.mapcoordinates.net/
Um nun auch noch einen sogenannten Marker auf die Karte zu setzten muss das JavaScript erweitert werden.
/* neuen Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});
Mit dieser Erweiterung ist ein Marker im Zentrum der Karte gesetzt. Das JavaScript sieht nun wie folgt aus:
<script type=“text/javascript“>// <![CDATA[
/* zu erst werden die Optionen im JSON Format definiert */
var myOptions = {
zoom: 12, // Zoom Stufe der Karte
mapTypeId: google.maps.MapTypeId.ROADMAP // Ausgabe art der Karte ( Straßenkarte / Satellitenkarte / Terrain Karte / Hybrid )
};
/* anschließend wird das Eigentlich Karten Objekt erstellt*/
var myMap = new google.maps.Map(
document.getElementById(„google_map“), // Die ID des HTML DIV in dem die Karte gezeigt werden soll.
myOptions // die oben definierten Optionen. Diese könneten auch direkt hier übergeben werde.
);
// Die Position für New York wäre die folgende
var latlong = new google.maps.LatLng(40.7143528,-74.0059731);
/* nun muss noch das Zentrum der Karte auf die Position gesetzt werden */
myMap.setCenter(latlong);
/* neuen Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});
// ]]></script>
Um mehrere Marker auf die Karte zu setzten werden einfach mehrere neue Marker mit Positionen untereinander geschrieben.
<script type=“text/javascript“>// <![CDATA[
/* zu erst werden die Optionen im JSON Format definiert */
var myOptions = {
zoom: 12, // Zoom Stufe der Karte
mapTypeId: google.maps.MapTypeId.ROADMAP // Ausgabeart der Karte ( Staßenkarte / Sattelitenkarte / Terrain Karte / Hybrid )
};
/* anschließend wird das Eigentlich Karten Objekt erstellt*/
var myMap = new google.maps.Map(
document.getElementById(„google_map“), // Die ID des HTML DIV in dem die Karte gezeigt werden soll.
myOptions // die oben definierten Optionen. Diese könneten auch direkt hier übergeben werde.
);
// Die Position für New York wäre die folgende
var latlong = new google.maps.LatLng(40.7143528,-74.0059731);
/* nun muss noch das Zentrum der Karte auf die Position gesetzt werden */
myMap.setCenter(latlong);
/* neuen Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});
// Die Position für den zweiten Marker erstellen
var latlong = new google.maps.LatLng(39.7143528,-75.0059731);
/* Einen weiterern Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});
// ]]></script>
Die Karte kann zudem bei mehreren Markern dem Zentrum dieser ausgerichtet werden.
Die erreicht man mit dem Google Map LatLngBouncer.
Anhand des Folgenden Beispiels wird eine Karte mit drei Markern Mittig positioniert.
<script type=“text/javascript“>// <![CDATA[
/* zu erst werden die Optionen im JSON Format definiert */
var myOptions = {
zoom: 12, // Zoom Stufe der Karte
mapTypeId: google.maps.MapTypeId.ROADMAP // Ausgabeart der Karte ( Staßenkarte / Sattelitenkarte / Terrain Karte / Hybrid )
};
/* anschließend wird das Eigentlich Karten Objekt erstellt*/
var myMap = new google.maps.Map(
document.getElementById(„google_map“), // Die ID des HTML DIV in dem die Karte gezeigt werden soll.
myOptions // die oben definierten Optionen. Diese könneten auch direkt hier übergeben werde.
);
/* Ein Bounce Objeket erstellen */
var Bounds = new google.maps.LatLngBounds(); // das Objekt zur verwaltung der Marker Positionen
// Die Position für New York wäre die folgende
var latlong = new google.maps.LatLng(40.7143528,-74.0059731);
/* dem Bounce die Position des ersten Markers übergeben */
Bounds.extend(latlong);
/* neuen Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});
// Die Position für den zweiten Marker erstellen
var latlong = new google.maps.LatLng(39.7143528,-75.0059731);
/* dem Bounce die Position des zweiten Markers übergeben */
Bounds.extend(latlong);
/* Einen weiterern Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});
// Die Position für den zweiten Marker erstellen
var latlong = new google.maps.LatLng(41.7143528,-73.0059731);
/* dem Bounce die Position des dritten Markers übergeben */
Bounds.extend(latlong);
/* Einen weiterern Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});
/* nun muss die Karte auf das Richtige Zoom Level gesetzt werden um alle Punkte sehen zu können. */
var zoomLevel = myMap.fitBounds(Bounds);
/* jetzt wird das Zentrum des Bounce Objektes benötigt. */
var mapCenter = Bounce.getCenter();
/* nun muss noch das Zentrum der Karte auf die Position gesetzt werden */
myMap.setCenter(mapCenter, zoomLevel);
// ]]></script>
Manuel Müller 