Google Maps API Tutorial Google Maps API Tutorial
Back to Home Page

Example of Hiding Marker for Google Map API

View Example


Notes

In this example, when you click the marker, it will disapper.
The key is to use marker.setVisible function:
google.maps.event.addListener(marker, 'click', function() {
    marker.setVisible(false); // maps API hide call
});


Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Add Marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}
</style>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(37.286172, -121.80929),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        var myLatlng = new google.maps.LatLng(37.286172, -121.80929);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Click me to hide the marker'
        });
        google.maps.event.addListener(marker, 'click', function() {
            marker.setVisible(false); 
        });
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>