Показать/скрыть маркер И использовать информационное окно google maps API v3

Question

Я создаю свою собственную карту gooogle и хочу, чтобы на моей карте было 2 функции; показать/скрыть маркер и показать информационное окно (при нажатии на маркер)

Однако я могу делать только одно. Если я хочу показать/скрыть маркер, я должен нажать массив, но тогда он не сможет отобразить информационное окно для отдельного маркера, так что я сейчас в ситуации catch-22 ... Надеюсь, один из вас парни могут подталкивать меня в правильном направлении :)

Вот код, который я до сих пор (показать/скрыть маркер):

var map; 
var otherMarker = []; 
var other = [{lat: 52.5001054,lng: 5.0578416,name: 'Volendam',content: 'Fishing village',icon: '../css/images/marker1.png'},{}]; 

function initialize() { 

    var myOptions = { 
     backgroundColor: '#FFFFF', 
     zoom: 7, 
     center: new google.maps.LatLng(52.2129919 , 5.2793703), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     streetViewControl: false, 
     mapTypeControl: false 
    }; 

    var map_canvas = document.getElementById("map_canvas"); 

    map = new google.maps.Map(map_canvas, myOptions); 
    var infowindow = new google.maps.InfoWindow(); 

     for (var i = 0; i < other.length; i++) { 

      otherMarker.push(new google.maps.Marker({ 
      position: new google.maps.LatLng(other[i].lat, other[i].lng), 
      map: map, 
      icon: other[i].icon 


      })); 

      google.maps.event.addListener(otherMarker, 'click', (function(otherMarker, i) { 
      return function() { 
      infowindow.setContent('<div id="content">'+ 
      '<div id="siteNotice">'+ 
       '</div>'+ 
       '<h1 id="firstHeading" class="firstHeading">'+other[i].name+'</h1>'+ 
       '<div id="bodyContent">'+ 
       '<p>'+other[i].content+'</p>'+ 
       '</div>'+ 
      '</div>'); 
       infowindow.open(map, otherMarker); 

      } 
      })(otherMarker, i)); 
     } 
} 

    function hideOther(){ 
     for(var i=0; i<otherMarker.length; i++){ 
      otherMarker[i].setVisible(false); 
     } 
    } 

window.onload = initialize;  

чтобы показать InfoWindow я не заталкивать массив и заменить для цикла с этим кодом:

 for (var i = 0; i < other.length; i++) { 

      otherMarker= new google.maps.Marker({ 
      position: new google.maps.LatLng(other[i].lat, other[i].lng), 
      map: map, 
      icon: other[i].icon 


      }); 

Answer 1

Спасибо Amenadiel! Однако информационное окно не будет всплывать в нужном месте, но с вашей помощью я немного изменил код и теперь он работает! :) Вот рабочий код;

var otherMarker = []; 
var newMarker = []; 
var other = [{lat: 52.5001054,lng: 5.0578416,name: 'Volendam',content: 'Fishing village',icon: '../css/images/marker1.png'},{}]; 

function initialize() { 

    var myOptions = { 
     backgroundColor: '#FFFFF', 
     zoom: 7, 
     center: new google.maps.LatLng(52.2129919 , 5.2793703), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     streetViewControl: false, 
     mapTypeControl: false 
    }; 

    var map_canvas = document.getElementById("map_canvas"); 

    map = new google.maps.Map(map_canvas, myOptions); 
    var infowindow = new google.maps.InfoWindow(); 

    for (var i = 0; i < other.length; i++) { 

     otherMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(other[i].lat, other[i].lng), 
     map: map, 
     icon: other[i].icon 


     }); 
     google.maps.event.addListener(otherMarker, 'click', (function(otherMarker, i) { 
     return function() { 
     infowindow.setContent('<div id="content">'+ 
     '<div id="siteNotice" style="width:300px;">'+ 
      '</div>'+ 
      '<h1 id="firstHeading" class="firstHeading">'+other[i].name+'</h1>'+ 
      '<div id="bodyContent">'+ 
      '<p style="width:300px;margin-top:5px;">'+other[i].content+'</p>'+ 
      '</div>'+ 
     '</div>'); 
      infowindow.open(map, otherMarker); 


     } 
     })(otherMarker, i)); 
     newMarker.push(otherMarker); 
    } 
} 

function hideOther(){ 
    for(var i=0; i<newMarker.length; i++){ 
     newMarker[i].setVisible(false); 
    } 
} 
function showOther(){ 
    for(var i=0; i<newMarker.length; i++){ 
     newMarker[i].setVisible(true); 
    } 
} 

window.onload = initialize;  

Answer 2

otherMarker - это всего лишь массив, а не элемент google.maps. Таким образом, у него нет слушателей как таковых.

Во-вторых, как любой элемент js, вы можете добавить несколько собственных свойств в google.maps.Marker, чтобы их можно было прочитать позже, когда вы открываете окно infoWindow.

Чтобы получить каждый из ваших маркеров для отображения InfoWindow при нажатии, вы должны сделать

for (var i = 0; i < other.length; i++) { 
    var newMarker=new google.maps.Marker({ 
     position: new google.maps.LatLng(other[i].lat, other[i].lng), 
     map: map, 
     icon: other[i].icon, 
     name: other[i].name, 
     content: other[i].content 
    }); 

    google.maps.event.addListener(newMarker, 'click', function() { 
     infowindow.setContent('<div id="content">'+ 
     '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h1 id="firstHeading" class="firstHeading">'+newMarker.name+'</h1>'+ 
      '<div id="bodyContent">'+ 
      '<p>'+newMarker.content+'</p>'+ 
      '</div>'+ 
     '</div>'); 
     infowindow.open(map, newMarker); 
    }); 

    otherMarker.push(newMarker); 
} 

другими словами:

• декларируют маркер
• декларировать его слушателя
• надавить на массив

Обратите внимание, что я упростил анонимную функцию для события click. Он должен работать, но в случае, если infowindow окажется пустым, возможно, вы можете использовать getters для имени и контента вместо прямого доступа к свойству.