Пользовательский контент InfoWindow> Google Maps

Question

Я работаю над картой местоположений, которая использует API Карт Google. Желаемый результат:

1. Карта с несколькими местоположениями (завершена, протестирована, работает по желанию).
2. Кастомные штифты (завершены, протестированы, работают по желанию).

--- Вещи, которые я не могу понять ---

1. Пользовательский контент в информационном окне (щелкните значок, информационное окно откроется с именем, адресом и т. П.)
2. Ссылка в списке мест, которая позиционирует карту и открывает информационное окно.

JavaScript на данный момент:

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]
  });
  }
}

Я использую V3 ... Если это имеет значение?

Я знаю, что я далеко. Буду признателен за любую помощь или направление.

Заранее спасибо.

@ rrfive

Answer 1

Итак, вы хотите иметь одно информационное окно, но оно получает разный контент для каждого маркера.то есть содержание и его позиция изменяются в ответ на щелчки пользователя.Так что в цикле, где вы создаете свои маркеры, вы также хотите создать свое информационное окно.Однако вам нужно будет отделить это от другой функции, иначе вы столкнетесь с ситуацией, когда каждое информационное окно просто содержит содержимое последнего маркера.

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);
    });
} 

Я не уверен, куда вы попалидетали адреса из - в моем примере я просто использую ту же часть вашего массива, которую вы передаете атрибуту title, который я затем отображаю в информационном окне.Возможно, вам придется воспользоваться сервисом Geocoder для поиска адресов каждого latLng, который затем может быть дополнительным столбцом в массиве.

Update :Если затем вам нужен нормальный триггер ссылки, как если бы вы щелкнули маркер, вам нужно сделать так, чтобы ваши маркеры были в массиве (сделайте это глобальной переменной, вставьте маркеры в массивпосле их создания).Нажатие на ссылку вызывает функцию javascript, передавая число, чтобы определить, какой элемент массива использовать.Затем вы нажимаете на этот маркер, например

<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');
}