Best practice for showing/hiding a marker? memory leak in IE8

DRI

unread,

Sep 21, 2010, 2:40:30 PM9/21/10

to Google Maps JavaScript API v3

Is marker.setVisible() the best way to show/hide a marker? please note
that the marker is needed and may be displayed in the future so
removing it from the map may not be a good idea.

Also there seems to be a memory leak in IE8. The following code
creates 200 markers and randomly hides 20 of them every 1.5 secs. With
IE8 the memory usage goes up rapidly with time

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">

var map=null;
function initialize() {
var myLatlng = new google.maps.LatLng(35.772096, -78.638615);//
41.875696,-87.624207);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

setTimeout(createMarkers, 1000);
}

var markers = [];

function createMarkers() {

var lat = 35.772096, lon = -78.638615;

// create 10x10 markers
for (var i=0; i<10; i++) {
for (var j=0; j<10; j++) {
markers.push(new google.maps.Marker({map:map, position: new
google.maps.LatLng(lat, lon),
flat:true, zIndex:(i+j)}));

lon -= 0.01;

}
lat += 0.01;
lon = -78.638615
}

var lat = 35.76, lon = -78.638615;

// create another 10x10 markers
for (var i=0; i<10; i++) {
for (var j=0; j<10; j++) {
markers.push(new google.maps.Marker({map:map, position: new
google.maps.LatLng(lat, lon),
flat:true, zIndex:(i+j)})); //icon:'shelter_icon.png',

lon -= 0.01;

}
lat -= 0.01;
lon = -78.638615
}

setInterval(toggleMarkers, 1500);
}

function toggleMarkers() {
// randomly hide 20 markers

for (var i=0; i<markers.length; i++) {
markers[i].setVisible(true);
}

for (i=0; i<20; i++) {

markers[Math.floor(Math.random()*markers.length)].setVisible(false);
}
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

Ben Appleton

unread,

Sep 21, 2010, 6:14:00 PM9/21/10

to google-map...@googlegroups.com

.setMap(null) will remove the marker and release any resources the marker was holding. You can subsequently call .setMap(someMap) to reuse it.

.setVisible() is for fast showing and hiding. It is not intended to release any resources.

> --
> You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
> To post to this group, send email to google-map...@googlegroups.com.
> To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>

DRI

unread,

Sep 22, 2010, 12:38:11 PM9/22/10

to Google Maps JavaScript API v3

changing the above example to use setMap(null) instead of
setVisible(false) does not work on IE8. It is not able to show/hide
markers as desired. IE8 slows down to a crawl.

Ben Appleton

unread,

Sep 22, 2010, 6:08:10 PM9/22/10

to google-map...@googlegroups.com

.setMap(null) works for me to remove markers. Please provide a link to your site where it fails to remove markers.

DRI

unread,

Sep 23, 2010, 2:07:11 PM9/23/10

to Google Maps JavaScript API v3

My requirement is to hide a marker. In my example code in the initial
post I have to randomly hide 20 markers out of a total of 200 every
1.5 seconds. On IE8 marker.setVisible() causes a memory leak.

setMap(null) also works in hiding a marker however it is too slow. on
IE8 I cannot even see all the markers that are visible.

Please run my example on IE8 with setMap() and setVisible() to see the
difference.

Ben Appleton

unread,

Sep 23, 2010, 7:32:12 PM9/23/10

to google-map...@googlegroups.com

Please provide a link to your site.

.setVisible() does not leak memory, it is intended to keep the marker around.

Reply all

Reply to author

Forward