Question

I have these markers in google maps. I need to be able to show or hide them according to the ‘id’ part of the array using check boxes to toggle them on & off.

  var places = [  
  {  
    "title": "USA",  
    "description": "This is the united states",  
    "position": [ 39.639538,-104.414062 ],
    "id": "america"
  },  
  {  
    "title": "China",  
    "description": "This is the peoples republic of china",  
    "position": [ 34.016242,103.359375 ],
    "id": "asia"  
  }
]

I’ve displayed the markers using the .each() methid and I’ve tried using the below jquery to toggle them on and off according to their id but the markers seem to ignore it. Any help would be greatly appreciated.

 var showAmerica = $("#showAmerica");
    google.maps.event.addDOMListener(showAmerica, 'click', function(){
        $('#america').toggle();
});

HTML for the checkbox

<input type="checkbox" value="fund" id="showAmerica" />

Answer 1

You’re code is referencing the jQuery object, not the DOM element. It’s easy to get at the actual DOM element, which is what the DOM listener is expecting as an argument. Simply add .get(0) to the showAmerica variable in the first argument:

var showAmerica = $("#showAmerica");
    google.maps.event.addDOMListener(showAmerica.get(0), 'click', function(){
        $('#america').toggle();
});

Also, suggest you watch this video on using DevTools with the Google Maps API.