Benutzerdefinierte Infofenster Content > Google Maps

Arbeite ich an einem Ort-Karte verwendet die Google Maps API. Das gewünschte Ergebnis ist:

  1. Eine Karte mit mehreren Standorten (fertiggestellt, getestet, funktioniert wie gewünscht).
  2. Benutzerdefinierte pins (fertiggestellt, getestet, funktioniert wie gewünscht).

--- Dinge, die ich nicht herausfinden können ---

  1. Benutzerdefinierten Inhalt in das info-Fenster (klicken Sie auf pin, info-Fenster öffnet sich mit name, Adresse, solche Sachen.)
  2. Einen link innerhalb der Liste von Orten, die Positionen der Karte und öffnet das info-Fenster.

JavaScript so weit:

function initialize() {
  var myOptions = {
  zoom: 11,
  center: new google.maps.LatLng(-33.802544,151.20203),
  mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  setMarkers(map, lianaraine);
}

var lianaLocations = [
  ['1', -33.750829,151.24086, 1],
  ['2', -33.846405,151.211677, 2],
  ['3', -33.876321,151.241171, 3],
  ['4', -33.871511,151.159599, 4],
  ['5', -33.901535,151.161743, 5],
  ['5', -33.676461,151.304244, 6]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('images/icon_mapPin.png',
    new google.maps.Size(30, 40),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 40));
  var shadow = new google.maps.MarkerImage('images/icon_mapPin_shadow.png',
    new google.maps.Size(26, 20),
    new google.maps.Point(0,0),
    new google.maps.Point(-13,21));
  var shape = {
    coord: [1, 1, 1, 40, 30, 40, 30 , 1],
    type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
  var liana = locations[i];
  var myLatLng = new google.maps.LatLng(liana[1], liana[2]);
  var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: liana[0],
      zIndex: liana[3]
  });
  }
}

Ich bin mit der V3... Wenn das zählt?

Ich weiß, ich bin ein fairer Weg. Jede Hilfe oder Richtung wäre sehr hilfreich.

Vielen Dank im Voraus.

@rrfive

InformationsquelleAutor rrfive | 2011-11-20
  1. 4

    So, was Sie wollen, zu tun haben, ist ein Infofenster, aber es bekommt einen anderen Inhalt für die einzelnen marker. d.h. die Inhalte und seine position ändert sich in Reaktion auf Benutzer-Klicks. Also in der Schleife, wo Sie erstellen Ihre Marker, Sie wollen auch Ihre Infofenster. Sie werden jedoch getrennt werden müssen diese aus, um eine andere Funktion, sonst beenden Sie mit der situation, wo jeder Infofenster beinhaltet nur den Inhalt der letzten Markierung.

    function setMarkers(map, locations) {
  ...
  var infowindow =  new google.maps.InfoWindow({
    content: ''
  });

  for (var i = 0; i < locations.length; i++) {
    var liana = locations[i];
    var myLatLng = new google.maps.LatLng(liana[1], liana[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: liana[0],
      zIndex: liana[3]
    });

    //add an event listener for this marker
    bindInfoWindow(marker, map, infowindow, "<p>" + liana[0] + "</p>");
  }
}

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

    Ich bin nicht sicher, wo Sie bekommen die Adresse, die details aus - in meinem Beispiel bin ich nur mit dem gleichen Teil der Arrays, die Sie übergeben haben, um das 'title' - Attribut, mit dem ich dann die Anzeige im Infofenster. Wahrscheinlich müssen Sie die Geocoder service, um sich die Adressen der einzelnen latLng, was könnte dann eine zusätzliche Spalte in das array.

    Update: Wenn Sie dann brauchen, um einen normalen link auslösen, als hätten Sie klicken auf den marker, was Sie tun müssen, haben Sie Ihren Marker in einem array (machen, dass eine Globale variable, push Marker in das array nach der Erstellung). Klick auf den link ruft eine javascript-Funktion übergeben einer Zahl zu ermitteln, welches element im array zu verwenden. Dann haben Sie "trigger" ein, klicken Sie auf das marker, z.B. 

    <a href="#" onclick="showWindow(0); return false">One</a>
<a href="#" onclick="showWindow(1); return false">Two</a>

function showWindow(id) {
    google.maps.event.trigger(markersArray[id], 'click');
}
    • Duncan, nur eine Frage. Wie würden Sie auslösen, das Infofenster zu öffnen, die von einem a-tag? Danke!
    • Aktualisiert meine Antwort mit etwas mehr code, die zeigen sollten, dass Sie den Weg in Angriff zu nehmen
    InformationsquelleAutor duncan
Schreibe einen Kommentar