Кнопка не работает в infoWindow на карте Google

Question

У меня есть эта карта Google, которая работает, я хочу добавить кнопку в информационном окне, которое почему-то не работает.Хотя функция определена, но все равно выдает ошибку http://jsfiddle.net/mpgxn53q/

<div id="apptMap"></div>
//the js code
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

var locations = [["158845-001 - Adas Israel Congregation",38.9369545,-77.0575097,1],["163888-137 - Construction LLC",43.1765812,-84.6986701,2.0],["163888-155 - Construction LLC",43.1765812,-84.6986701,3.0],["167176-007 - GLDB MTM10 GLR016",42.4894512,-95.5449508,4.0],["167195-003 - 91622 DB A4",42.8275053,-84.5717997,5.0],["167195-002 - 91622 DB A4",42.8275053,-84.5717997,6.0],["167176-005 - GLDB MTM10 GLR016",42.0023,-93.6110955,7.0],["167176-004 - GLDB MTM10 GLR016",42.0023,-93.6110955,8.0]];

var map;
var markers = [];

function init(){
  map = new google.maps.Map(document.getElementById('apptMap'), {
    zoom: 10,
    center: new google.maps.LatLng(42.0023,-93.6110955),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var num_markers = locations.length;
  for (var i = 0; i < num_markers; i++) {  
    markers[i] = new google.maps.Marker({
      position: {lat:locations[i][1], lng:locations[i][2]},
      map: map,
      html: locations[i][0],
      id: i,
    });

    google.maps.event.addListener(markers[i], 'click', function(){
      var infowindow = new google.maps.InfoWindow({
        id: this.id,
        content:this.html +'<button onclick="mapsZoomMarker('+i+')">Click me</button>',
        position:this.getPosition()
      });
      google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
        markers[this.id].setVisible(true);
      });
      this.setVisible(false);
      infowindow.open(map);
    });
  }
}
function mapsZoomMarker(wnMarker){
            map.setCenter(markers[wnMarker].getPosition());
            map.setZoom(15);
        } 
init();

Answer 1

Существует проблема с областями видимости, и именно поэтому вы написали свой сценарий.Я не собираюсь переписывать ваш сценарий, но я дам вам решение для вашей конкретной ситуации.

Вам необходимо определить вашу функцию mapsZoomMarker в глобальной области видимости (объект окна) следующим образом:

window.mapsZoomMarker = function (wnMarker){
    map.setCenter(markers[wnMarker].getPosition());
    map.setZoom(15);
} 

И есть также ошибка в функции, которая вызывается при нажатии на маркер.Когда вы присваиваете html для всплывающего окна следующим образом

content: this.html +'<button onclick="mapsZoomMarker('+i+')">Click me</button>'

, переменная i уже установлена ​​на 8, поэтому вместо этого просто используйте this.id, например:

content: this.html +'<button onclick="mapsZoomMarker('+this.id+')">Click me</button>'

А это обновленная скрипка http://jsfiddle.net/rn27f05v/

Answer 2

Я предложу решение, которое я считаю наилучшим для того, что вы хотите.Вместо того, чтобы вызывать функцию внутри var infowindow, вы можете определить только переменную для размещения содержимого, которое вам нужно.

Вы можете изменить ваше var infowindow на:

var infowindow = new google.maps.InfoWindow({
    id: this.id,
    content: content, //here the variable that call your content
    position:this.getPosition()
});

Так ... выше вашего google.maps.event.addListener(markers[i], 'click', function(){... Вы можете добавить:

var content = '<button onclick="mapsZoomMarker('+i+')">Click me</button>';

Таким образом, действие щелчка будет работать.

Надеюсь, этот совет поможет вам.