Markers not showing until map moved slightly or clicked

google-maps, google-maps-api-3, google-maps-markers, javascript

Solution

It seems that the problem is still exists in google chrome in most recent version on google map api and marker cluster js.

So I'll post the code which helped in this issue for me.

google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(function() {
        var cnt = map.getCenter();
        cnt.e+=0.000001;
        map.panTo(cnt);
        cnt.e-=0.000001;
        map.panTo(cnt);
    },400);
});

feel free to play with value of interval of 400 (in my case less than 400 woudn't fix problem, but higher value - higher lag time)

P.S. make sure you have defined map variable:

map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

Problem

my (cut down) code is as below. My markers are not showing up until I either click or move the map slightly... is there any way of getting around this so they show up instantly? ``` <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>TSF - Labour Plan </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var centerlatlng = new google.maps.LatLng(53.644638, -2.526855); var myOptions = { zoom: 6, center: centerlatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var latlng = new google.maps.LatLng(51.752927, -0.470095); var img = "https://dl.dropboxusercontent.com/u/55888592/tsf-logo.gif"; var info = "<img style = 'float: left' src='http://www.tsf.uk.com/wp-content/themes/default/images/tsf-logo.gif'><div style = 'float: right; width: 200px'><p><b>Job Number:</b> </p><p><b>Client:</b> ASDA</p><p><b>Location:</b> HEMEL HEMPSTEAD</p><p><b>Postcode:</b> HP2 4AA</p><p><b>Start Time:</b> 22:0</p><p><b>No of Men:</b> 10.0</p><p><b>Allocated Labour:</b> AB: 5.0, WK: 5.0, : , : , : , : </p><p><b>Job Information: </b>PICK UP TOOLS</div>"; var infowindow = new google.maps.InfoWindow({ }); var marker = new google.maps.Marker({ icon: img, position: latlng, map: map, content: info }); marker.setMap(map); google.maps.event.addListener(marker, "click", function(content) { infowindow.setContent(this.content); infowindow.open(map,this); }); } google.maps.event.addDomListener(window, "load", initialize); </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <div id="map_canvas" style="width: 100%; height: 100%;"></div> </body> </html> ```

Original source