20.11.2013

Mehrere Marker mit Infofenster auf einer Karte - Google Maps API V3

von SOBAG

Anhand eines Beispiels wird hier gezeigt, wie auf Basis eines RSS-Feeds mit Geokoordinaten mehrere Marker auf einer Google Map (API V3) mit dazugehörigen Infofenstern gesetzt werden können.

Auf www.nordagenda.ch gibt es eine tagesaktuelle Übersicht mit allen Veranstaltungen in der Region Nordschweiz, dargestellt auf einer Karte. Dazu wird die Version 3 der Google Maps API eingesetzt.

Als Datenbasis dient ein RSS-Feed mit Daten aus der nordagenda-Veranstaltungsdatenbank: www.nordagenda.ch/rss/georss_nordagenda.asp

Um die API nutzen zu können, braucht es zuerst einen API-Schlüssel:
https://developers.google.com/maps/documentation/javascript/tutorial#api_key

 

Dann wird die Verknüpfung zur API im Kopf der Webseite eingebunden:

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false" type="text/javascript"></script>  

 

Irgendwo auf der aktuellen Seite wird ein Container mit einer ID erstellt (z.B. karte):

<div id="karte" style="width: 100%; height: 600px; "></div>

 

Dann wird die Karte initialisiert:

function initialize() {

      //Koordinaten von Schaffhausen
      var myLatlng = new google.maps.LatLng(47.6944774,8.6362258);
       

        //Kartenoptionen
        var mapOptions = {
          center: myLatlng,
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
          map = new google.maps.Map(document.getElementById("karte"),
          mapOptions);

          //Funktion zum Setzen der Marker
          agendamarker();
      }

 

Die Funktion agendamarker():

function agendamarker() {
    

    /* ... Daten von RSS in Array lesen und dann kommt das eigentliche Markersetzen. */


    var info;
    var marker;
    var infowindow;
    for (var i = 0; i < markers.length; i++) {  

        var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
       
        if (typeof title[i].textContent != 'undefined') {
            var info  = title[i].textContent;
        } else if (typeof title[i].text != 'undefined') {
            var info  = title[i].text;
        }

        var infowindow = new google.maps.InfoWindow({
              content: info
          });
       
        var marker = new google.maps.Marker({
              position: point,
              map: map,
              html: info
         });
             
       

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.html);
            infowindow.open(map,this);
          });
        }
     }
}

Das Ganze gibts hier im Einsatz: http://www.nordagenda.ch/map.asp

 

 

Meier + Cie AG
SOBAG
Vordergasse 58
8201 Schaffhausen

Tel. +41 52 633 35 55
E-Mail: infosobagch

Unsere Portale:

nordagenda.ch schaffhausen.ch