Hola, ando con un problemita, me propuse de a poco y con mucho esfuerzo, tratar de entender este tema de la geo de google y crear una herramienta para mi comunidad como un hecho de estudio. Pero al momento de llevarlo a la pantalla me encontré con muchísimas necesidades que fuí resolviendo de a poco (con mucha ayuda). En esta ocación mi problema es: Cuando cambio el zoom el cículo anterior no se borra. Por lo tanto si hago 10 zooms me dibija 10 circulos por cada resultado del array. Cosa que obviamenteno debe ser posible.
Alguien me podría indicar la frma de que: Si VARÍA EL ZOOM, borrar los markers anteriores y volver a calcular la escala.
Dejo el código y si les sirve o si lo quieren corregir "BIENVENIDO SEA".
Desde ya muchas gracias!!!!!
Código HTML:
<?php
$i=0;
try {require_once "clases/conexion.php";
$conn = dbConnect();
$stmt = $conn->prepare('SELECT id,fecha,observa,coordenada,actor1,actor2,interv107,cantidadheridos,traslado FROM datos where Motivo="ACCIDENTES"');
$stmt->execute();
while( $datos = $stmt->fetch())
{$id[] = $datos["id"]; $fec= $datos["fecha"]; $fh=explode(" ",$fec); $fec= $fh[0]; $fa=explode("-",$fec); $fecha[]= $fa[2]."-".$fa[1]."-".$fa[0]; $hora[]= $fh[1]; $observa[]=$datos["observa"]; $actor1[]=$datos["actor1"]; $actor2[]=$datos["actor2"]; $qw=$datos["coordenada"]; $we=explode(",",$qw); $lat[]=$we[0]; $lng[]=$we[1]; $i = $i+1; }
$CantidadDeLineas = $i;
?>
<div align="center" id="map1"></div>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map1'), {
mapTypeControl: false,
streetViewControl: false,
zoom: 14,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
<?php echo "center: {lat:".$lat[0].",lng:".$lng[0]."}"?>
});
var datos = [<?php for ($i=0; $i<$CantidadDeLineas; $i++){echo "['DELITO: Fecha: ".$fecha[$i]." // Hora: ".$hora[$i]." // Observaciones: ".$observa[$i]."', ".$lat[$i].",".$lng[$i]."],";}?>];
function setMarkera(map) {
for (var i = 0; i < datos.length; i++) {
var dato = datos[i];
var markera = new google.maps.Marker({
position: {lat: dato[1], lng: dato[2]},
map: map,
icon: {path: google.maps.SymbolPath.CIRCLE, scale: 9, strokeColor:'#f00', strokeWeight: 5, strokeOpacity: 0.2, fillColor:'#f00', fillOpacity:0.5},
title: dato[0]
});}}
setMarkera(map);
setMarkers(map);
function setMarkers(map) {
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
for (var i = 0; i < datos.length; i++) {
var dato = datos[i];
if(eval(zoom)==08){zooma=eval(zoom*0.00000001);}
if(eval(zoom)==09){zooma=eval(zoom*0.0000001);}
if(eval(zoom)==10){zooma=eval(zoom*0.000001);}
if(eval(zoom)==11){zooma=eval(zoom*0.00001);}
if(eval(zoom)==12){zooma=eval(zoom*0.0001);}
if(eval(zoom)==13){zooma=eval(zoom*0.001);}
if(eval(zoom)==14){zooma=eval(zoom*0.1);}
if(eval(zoom)==15){zooma=eval(zoom*1.4);}
if(eval(zoom)==16){zooma=eval(zoom*2.8);}
if(eval(zoom)==17){zooma=eval(zoom*5.3);}
if(eval(zoom)==18){zooma=eval(zoom*10.5);}
if(eval(zoom)==19){zooma=eval(zoom*20.1);}
if(eval(zoom)==20){zooma=eval(zoom*35.9);}
var marker = new google.maps.Marker({
position: {lat: dato[1], lng: dato[2]},
map: map,
icon: {path: google.maps.SymbolPath.CIRCLE, scale: eval(zooma), strokeColor:'#f00', strokeWeight: 5, strokeOpacity: 0.2, fillColor:'#f00', fillOpacity:0.5},
title: dato[0]
});}});}}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap"></script>
<?php
}catch(PDOException $e) {echo 'Error: ' . $e->getMessage();} $conn=null;
?>