Show/hide markers on google maps

Hi
I have got the following code and I would like to show/hide each of the markers, separately, without having to reload the page.  

var venues = [["Rifle Place, Avondale", 51.509224, -0.216016, 15],
                ["Binfield Road, Stockwell", 51.47250956, -0.122831913, 0],
                ["Tallis Street, Temple", 51.511891, -0.107349, 10],
                ["Hurlingham Park, Parsons Green", 51.470131, -0.20464, 8],
                ["Little Brook Green, Brook Green", 51.496664, -0.223868, 6],
                ["Abyssinia Close, Clapham Junction", 51.460333, -0.167029, 22],
                ["Limburg Road, Clapham Common", 51.46192307, -0.165297857, 09]];

var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var center;
                navigator.geolocation && navigator.geolocation.getCurrentPosition(showPosition, showError) == undefined && showError();

                var infowindow = new google.maps.InfoWindow();
                var directionsService = new google.maps.DirectionsService();
                var directionsDisplay = new google.maps.DirectionsRenderer();
                directionsDisplay.setMap(map);

                var marker, i;

				var image_loc = "/images/mapicons/", image_low = image_loc + "markerlow.png", image_med = image_loc + "markermed.png", image_high = image_loc + "markerhigh.png", bike = image_loc + "bike.png";


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

                        marker = new google.maps.Marker({
                        position: new google.maps.LatLng(venues[i][1], venues[i][2]),
                        map: map,
                        icon: Math.round(venues[i][3]) == 0 ? bike : ((Math.round(venues[i][3]) < 5) ? image_low : ((Math.round(venues[i][3]) > 10) ? image_high : image_med))

                                                         });

                        google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                        return function () {
                        infowindow.setContent(venues[i][0] + '<br/><a href="javascript:calcRoute(' + i + ')">How do I get there?</a><br>View on <a href="http://maps.google.com/maps?q=' + venues[i][1] + ',' + venues[i][2] + '">Google Maps</a>');
                        infowindow.open(map, marker);
                                            }
                                                                                                })
                        (marker, i));


                }

Open in new window


Please can someone help me out?

thanks
lz7cjcAsked:
Who is Participating?
 
Tom BeckCommented:
Here's a simplified version of your map with buttons dynamically added (based on the array of locations) to show and hide individual markers or all at once.

http://jsfiddle.net/tommyBoy/oyax5x2j/
0
 
Tom BeckCommented:
What would trigger the markers to show and hide?
0
 
lz7cjcAuthor Commented:
i would be looking to put a button or link - at this stage don't mind.

In my failed attempt I used this:
// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < venues.length; i++) {
    venues[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Shows any markers currently in the array.
function showMarkers() {
  setAllMap(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  venues = [];
}

</script>
<div id="panel">
      <input onclick="clearMarkers();" type=button value="Hide Markers">
      <input onclick="showMarkers();" type=button value="Show All Markers">
      <input onclick="deleteMarkers();" type=button value="Delete Markers">
    </div>
  </section>
-->

Open in new window

0
 
lz7cjcAuthor Commented:
that's awesome ... thank you... I will try to integrate it in the morning and post a new question if I get stuck

thanks
0
 
lz7cjcAuthor Commented:
am stuck! I thought I would be able to hack this into what I wanted but no joy. Any chance you can help me out with this question:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28620282.html
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.