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:

Google Maps für Ihre Website

Marker einbinden und Orte kennzeichnen: Marker mit Tooltipp einfügen

Auf dieser Seite