Show/hide marker AND use info window google maps API v3

Question

I'm building my own custom gooogle map and I want 2 functions on my map; show/hide marker and Show info window (when clicking on marker)

However, I'm only able to do one at a time. If I want to show/hide the marker I have to push the array, but then it can't show the info window for the individual marker, so I'm in a catch-22 situation right now... Hopefully one of you guys can nudge me in the right direction:)

Here's the code I have so far (to show/hide marker):

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;     

To show the infowindow I don't push the array and replace the for loop with this code:

       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

Thanks Amenadiel! The info window wouldn't popup in the right location though, but with your help I tweaked the code a little and it works now!:) Here's the working code;

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 is just an array, not a google.maps element. As such, it doesn't have listeners per se.

In second place, as any js element, you can add a few properties of your own to the google.maps.Marker, so you can read them later when opening the infoWindow.

To get each one of your markers to display an infoWindow when clicked, you should do

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

in other words:

• declare the marker
• declare its listener
• push it to the array

Please note that I simplified the anonymous function for the click event. It should work, but in case the infowindow turns up empty, perhaps you could use getters for name and content instead of accessing the property directly.