lz7cjc
asked on
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.
Please can someone help me out?
thanks
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));
}
Please can someone help me out?
thanks
What would trigger the markers to show and hide?
ASKER
i would be looking to put a button or link - at this stage don't mind.
In my failed attempt I used this:
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>
-->
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
that's awesome ... thank you... I will try to integrate it in the morning and post a new question if I get stuck
thanks
thanks
ASKER
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:
https://www.experts-exchange.com/questions/28620282/Show-hide-markers-on-google-maps.html
thanks
https://www.experts-exchange.com/questions/28620282/Show-hide-markers-on-google-maps.html
thanks