DruckversionMarker einbinden und Orte kennzeichnen
Marker mit Tooltipp einfügen
Ein Marker mit Tooltipp
Ein Marker mit Tooltipp ist mit vier zusätzlichen Zeilen Code erstellt:
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hallo München"
}); Bei der Erstellung des Markers geben Sie drei Optionen an:
position bestimmt die Position des Markers. Im Beispiel soll die Position mit dem Mittelpunkt der Karte übereinstimmen. Und diesen hatten Sie bereits durch die folgende Zeile festgelegt:
var latlng = new google.maps.LatLng(48.13675, 11.57632);
Auf die vorher definierte Variable latlng greifen Sie beim Marker wieder zu.
Außerdem müssen Sie angeben, für welche Karte Sie den Marker erstellen. Im Beispiel ist dies map. Damit greifen Sie auf die vorher bei der Definition der Karte angegebene map zu:
var map = new google.maps.Map(document.getElementById("karte"), myOptions);title setzt den Titel des Tooltipps. Schreiben Sie ihn unbedingt in Anführungszeichen.
Damit sieht der Code für die Beispielkarte samt Marker folgendermaßen aus:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Karte</title>
<style type="text/css">
#karte { width: 400px; height: 400px;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(48.13675, 11.57632);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("karte"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hallo München"
});
}
</script>
</head>
<body onload="initialize()">
<div id="karte" ></div>
</body>
</html>So sieht die Karte mit Marker aus
:
Dies ist eine Leseprobe
Möchten Sie den Beitrag komplett lesen? Dann werden Sie Probemitglied und testen Sie akademie.de 14 Tage kostenlos!
Auf Google Maps API: Google-Karten einbinden erfahren Sie mehr über diesen Beitrag und die weiteren Leseproben.
Weitere Informationen finden Sie auf unserer Infoseite zur Mitgliedschaft und in unseren AGB.
Ich bin bereits Mitglied