öffentlich
Redaktion Druckversion

Google Maps für Ihre Website

4.857145
(7)
Beitrag bewerten
Stand: 29. August 2010

Marker 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 ausAnzeigen:

Mitglied werden

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen.

Sind Sie sich noch unsicher? Dann wählen Sie die Option “akademie.de kostenlos testen”. So können Sie sich 14 Tage in Ruhe umschauen. Downloads stehen Ihnen in dieser Zeit nicht zur Verfügung. Gefällt Ihnen akademie.de nicht, reicht ein formloser Widerruf per E-Mail innerhalb der ersten 14 Tage. Es entstehen für Sie keine Kosten. Widerrufen Sie nicht, erhalten Sie nach Ablauf von 14 Tagen vollen Zugriff und der Mitgliedsbeitrag wird abgebucht.

Ich bin bereits Mitglied
Mitglied werden!
Ich entscheide mich für folgende Zahlungsweise:

Inhalt

Downloads zu diesem Beitrag

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren