javascript - script - marcar puntos en google maps api
Los marcadores no se muestran hasta que el mapa se mueve ligeramente o hace clic (4)
mi código (de corte) es el siguiente. Mis marcadores no aparecen hasta que hago clic o muevo un poco el mapa ... ¿hay alguna forma de evitar esto para que aparezcan al instante?
<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>
Estaba luchando con el mismo problema EXACTAMENTE y estaba tan contento de escuchar que otros chicos tienen el mismo problema. También experimenté el problema con GMaps V3 en Safari y Firefox. Probé tu solución y también me funciona, pero usé el evento inactivo en lugar del tiempo de espera:
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);
});
Solo agrégalo al inicializar Google Maps. Podría surgir otro problema al trabajar con infowindows y círculos vinculados a marcadores. En mi caso, puedo establecer el radio del círculo en el cuadro de información. Saltar del campo de entrada (con o sin cambiar el valor del radio) hace que los marcadores rojos parezcan azules. Si luego amplía / reduce el color original, reaparece. Para resolver este problema, debe cambiar el nivel de zoom rápidamente (en el evento radius_changed):
map.setZoom(map.getZoom()-1);
map.setZoom(map.getZoom()+1);
He resuelto esta repetición de llamadas en la variable markerclusterer dos veces:
mc.repaint();
map.fitBounds(bounds); // for centering within the marker bounds
mc.repaint(); // repaint for getting it fixed
Espero que esto ayude a cualquiera que aún enfrente el problema.
Parece que el problema todavía existe en google chrome en la versión más reciente de google map api y del marcador de grupo js.
Así que publicaré el código que ayudó en este tema para mí.
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);
});
siéntete libre de jugar con un valor de intervalo de 400 (en mi caso, menos de 400 no corregirían el problema, pero un valor más alto - mayor tiempo de latencia)
PD: asegúrese de tener una variable de mapa definida:
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
Según el comentario de Geocodezips, este parece ser un problema local.