Geek Answers Handbook

Markers without showing while the card has moved slightly or pressed

my (cut) code is as follows. My markers do not appear until I click or move the map a bit ... is there any way around this so that they display 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>
+7
javascript google-maps google-maps-api-3 google-maps-markers
source share
4 answers

According to Geocodezips comment, this seems like a local issue.

+1
source share

It seems that the problem still exists on google chrome in the latest version on google map api and cluster cluster js.

So I will post a code that helped me with this issue.

 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 an interval value of 400 (in my case, less than 400 errors are not a problem, but a higher value means a higher delay time)

PS make sure you define a map variable:

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

I struggled with the EXACTLY the same problem and was so glad to hear that the other guys had the same problem. I ran into a problem with GMaps V3 in Safari and Firefox. I tried your solution and it works for me, but I used a wait event instead of a timeout:

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

Just add it when initializing Google Maps. There may be another problem working with infowindows and marker-related environments. In my case, I can set the circle radius in info boxes. Jumping out of the input field (with or without changing the value of the radius) makes the red markers blue. If you then increase / decrease the original color, appears again. To solve this problem, you need to quickly change the zoom level (in the radius_changed event):

 map.setZoom(map.getZoom()-1); map.setZoom(map.getZoom()+1);
+4
source share

I enabled this call redraw in the markerclusterer variable twice:

 mc.repaint(); map.fitBounds(bounds); // for centering within the marker bounds mc.repaint(); // repaint for getting it fixed

Hope this helps anyone who is still facing this issue.

+1
source share

More articles:


All Articles