JavaScript - markers zoom scale

markers zoom scale

Publicado por roberto (7 intervenciones) el 16/03/2016 16:43:07

Hola, tengo un problemita, cuando cambio el zoom del mapa solo me cambia el tamaño del último registro del array y no de todos los markers. Podrian ayudarme para que cambie el tamaño de todos?
Se vé que me falta alguna funcion para recorrer cada uno de los datos y cambiarle el tamaño del marker, pero no se como hacerlo.
Muchas gracias.

<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

},

	center: {lat:-34.828379,lng:-57.966273}

});

	var accidentes = [

	<?php

		for ($i=0; $i<$CantidadDeLineas; $i++)

		{echo "['ACCIDENTE: ".$observa[$i]."', ".$lat[$i].",".$lng[$i]."],";}?>

];

	function setMarkers(map) {

	var markerImage = new google.maps.MarkerImage(

    'img/accidente.png',

    new google.maps.Size(30.5,30.5), //size

    null,//new google.maps.Point(0,0), // origin

    null,//new google.maps.Point(285,325),

    new google.maps.Size(30.5,30.5) //scale

);

	for (var i = 0; i < accidentes.length; i++) {

	var accidente = accidentes[i];

	var marker = new google.maps.Marker({

	position: {lat: accidente[1], lng: accidente[2]},

	map: map,

	icon: markerImage,

	//animation: google.maps.Animation.DROP,

	title: accidente[0]

});

google.maps.event.addListener(map, 'zoom_changed', function() {

zoom=map.getZoom();

if(zoom==21){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(1900, 1900)));}

if(zoom==20){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(950, 950)));}

if(zoom==19){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(550, 550)));}

if(zoom==18){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(242, 242)));}

if(zoom==17){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(120, 120)));}

if(zoom==16){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(61, 61)));}

if(zoom==15){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(30.5, 30.5)));}

if(zoom==14){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(15, 15)));}

if(zoom==13){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(9, 9)));}

if(zoom==12){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(4, 4)));}

if(zoom==11){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(1, 1)));}

});

setMarkers(map);}

	</script>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 22

Val: 71

markers zoom scale

Publicado por txema (25 intervenciones) el 16/03/2016 17:48:30

Hola Roberto.

Si bien tenemos PHP en tú código (me faltan datos en el desarrollo de tu array accidentes = [ ] azí como de la imagen que utilizas como marcador) y me es difícil comprobar el tema, yo haría una primera comprobación.

En la línea 34 abres un for que lo cierras en la línea 44. Prueba a cerrarlo después de la función google.maps.event.addListener, que sería después de la actual línea 38.

Lo que me llama la atención es el tratamiento de var markerImage en las líneas 25 a 31 (que corresponderían aunque yo eliminaría el null, y en las líneas 27 y 30 das valores de 30.5,30.5 (¿médios pixels??) y que de cualquier modo sumas un null (menos datos) en los if(zoom==xx){marker.setIcon(...).

Habría que probarlo con el código completo y lo que te trae var accidentes = [ ]

Nos comentas.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

markers zoom scale

Publicado por roberto (7 intervenciones) el 16/03/2016 18:48:38

<?php

 $i=0;

try {require_once "clases/conecta.php";

$conecta = dbConnect();

	$stmt = $conecta->prepare('SELECT id,fecha,observa,coordenada,actor1,actor2 FROM datos where Motivo="accidente"');

	$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

},

	center: {lat:-34.828379,lng:-57.966273}

});

	var accidentes = [

	<?php

		for ($i=0; $i<$CantidadDeLineas; $i++)

		{echo "['ACCIDENTE: Actores: ".$actor1[$i]." - ".$actor2[$i]." // Fecha: ".$fecha[$i]." // Hora: ".$hora[$i]." // Observaciones: ".$observa[$i]."', ".$lat[$i].",".$lng[$i]."],";}?>

];

	function setMarkers(map) {

	var markerImage = new google.maps.MarkerImage(

    'img/delito.png',

    new google.maps.Size(30.5,30.5), //size

    null,//new google.maps.Point(0,0), // origin

    null,//new google.maps.Point(285,325),

    new google.maps.Size(30.5,30.5) //scale

);

	for (var i = 0; i < accidentes.length; i++) {

	var accidente = accidentes[i];

	var marker = new google.maps.Marker({

	position: {lat: accidente[1], lng: accidente[2]},

	map: map,

	icon: markerImage,

	//animation: google.maps.Animation.DROP,

	title: accidente[0]

});

google.maps.event.addListener(map, 'zoom_changed', function() {

zoom=map.getZoom();

if(zoom==21){for (var i = 0; i < accidentes.length; i++) {

	var accidente = accidentes[i];

	marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(1900, 1900)));}}

if(zoom==20){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(950, 950)));}

if(zoom==19){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(550, 550)));}

if(zoom==18){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(242, 242)));}

if(zoom==17){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(120, 120)));}

if(zoom==16){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(61, 61)));}

if(zoom==15){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(30.5, 30.5)));}

if(zoom==14){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(15, 15)));}

if(zoom==13){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(9, 9)));}

if(zoom==12){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(4, 4)));}

if(zoom==11){marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(1, 1)));}

});

setMarkers(map);}

	</script>

	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRroc4u5Ae3Ts7tH9QFCfN0prQe_Of6o8&callback=initMap"></script>

	<?php

	}catch(PDOException $e)	{echo 'Error: ' . $e->getMessage();}	$conn=null;

?>

Gracias por la respuesta, pero aun no funciona. Te paso el código para que lo puedas ver. Desde ya muchas gracias.

Valora esta respuesta

Comentar

Pos: 22

Val: 71

markers zoom scale

Publicado por txema (25 intervenciones) el 16/03/2016 20:37:05

¿Tienes algún enlace donde poder ver la página?

¿Podrías ser más explicito en la pregunta?: Entiendo que quieres cambiar el tamaño de los marcadores (markers).

Valora esta respuesta

Comentar

markers zoom scale

Publicado por roberto (7 intervenciones) el 17/03/2016 12:41:36

Hola txema, no tengo enlace porque esta en prueba.Y la pregunta es: ¿Cómo hago para que al cambiar el zoom TODOS los markers cambien? Saludos y gracias.

Valora esta respuesta

Comentar

markers zoom scale

Publicado por roberto (7 intervenciones) el 17/03/2016 16:13:51

Esa parte la acabo de resolver asi, pero no se como armar un array de markers para que en el cambio de zoom afecte el setIcon a todos:

google.maps.event.addListener(map, 'zoom_changed', function() {

zoom=map.getZoom();

if(zoom==15){

	for (var i = 0; i < accidentes.length; i++) {var accidente = accidentes[i];

	var marker = new google.maps.Marker({

	position: {lat: accidente[1], lng: accidente[2]},map: map,icon: markerImage,title: accidente[0]});

	marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(30.5, 30.5)));}}

if(zoom==16){

	for (var i = 0; i < accidentes.length; i++) {var accidente = accidentes[i];

	var marker = new google.maps.Marker({

	position: {lat: accidente[1], lng: accidente[2]},map: map,icon: markerImage,title: accidente[0]});

	marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(61, 61)));}}

});

Valora esta respuesta

Comentar

Pos: 22

Val: 71

markers zoom scale

Publicado por txema (25 intervenciones) el 17/03/2016 16:47:49

Hola Roberto

Creo que vas bien encaminado pero hay varias cosas previas que creo hay que recodificarlas.

Veo que te conectas con Google maps desde el enlace

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRroc4u5Ae3Ts7tH9QFCfN0prQe_Of6o8&callback=initMap"></script>

Google Maps v3 no utiliza KEY (??). Lo era en la v2 ya obsoleta.

Sería importante ver qué te devuelve

var accidentes = [

	<?php*

		for ($i=0; $i<$CantidadDeLineas; $i++)

		{echo "['ACCIDENTE: Actores: ".$actor1[$i]." - ".$actor2[$i]." // Fecha: ".$fecha[$i]." // Hora: ".$hora[$i]." // Observaciones: ".$observa[$i]."', ".$lat[$i].",".$lng[$i]."],";}?>

];

Muéstra (en texto plano) lo que te devuelve la variable (array) accidentes
Lo habitual y más rápido es trabajar con JSON, que puedes configurarlo a partir de tu base de datos mediante PHP.

Reitero que veo muchos null en cada marker. Lo normal es que tengan datos en píxels en cada apartado.
Sería importante que aportes la imagen o imágenes que estás utilizando.

A partir de ahí podría probar la función google.maps.event.addListener(map, 'zoom_changed', function()

Saludos

Valora esta respuesta

Comentar

markers zoom scale

Publicado por roberto (7 intervenciones) el 17/03/2016 19:20:34

Lo que trae es el array de los datos de mi base mysql:
var accidentes = [['ACCIDENTE: Actores: AUTO - AUTO // Fecha: 11-02-2016 // Hora: 08:39:11 // Observaciones: NUMERO 1 ', -35.025046, -57.531596],['ACCIDENTE: Actores: MOTO - AUTO // Fecha: 11-02-2016 // Hora: 09:18:49 // Observaciones: NUMERO 2', -35.022841, -57.532154],['ACCIDENTE: Actores: MOTO - MOTO // Fecha: 12-02-2016 // Hora: 17:11:26 // Observaciones: NUMERO 3', -35.024071, -57.535834],['ACCIDENTE: Actores: AUTO - MOTO // Fecha: 15-02-2016 // Hora: 17:43:16 // Observaciones: NUMERO 4', -35.027682, -57.536735],];

Los nulls que ves son solamente posicionamiento de eje de los marquers (circulos).
Y mas allá de esto mi problema sigue siendo, como armar un nuevo array de estos marquers para al cambiar el zoom modificarles a todos el tamaño de dichos círculos.
Muchísimas gracias por el interes.

Valora esta respuesta

Comentar

markers zoom scale

Publicado por ROBERTO (7 intervenciones) el 17/03/2016 19:59:50

LISTO!!!!! RESUELTO. Muchas gracias. Generé un array nuevo de marcadores, nombrando a cada uno de esos markers y asignándole en el listen una escala a ese nuevo marker. Gracias por el interes!!!!!!!!!!!!!!!!!

Valora esta respuesta

Comentar

Pos: 22

Val: 71

markers zoom scale

Publicado por txema (25 intervenciones) el 17/03/2016 20:04:11

Por pura curiosidad: ¿podrías mostrar el nuevo código?.

Estaba trabajando para crear un array correcto pero, como te dije, con PHP y sin tener acceso a lo que se genera, el trabajo es a ciegas.

Saludos.

Valora esta respuesta

Comentar

markers zoom scale

Publicado por roberto (7 intervenciones) el 17/03/2016 21:24:56

var marcadores = [<?php	for ($i=0; $i<$CantidadDeLineas; $i++){echo "[".$lat[$i].",".$lng[$i]."],";}?>];

for (var i = 0; i < accidentes.length; i++) {

var accidente = accidentes[i];

var marker = new google.maps.Marker({

position: {lat: accidente[1], lng: accidente[2]},

map: map,

icon: markerImage,

title: accidente[0]

});

marcadores[i]= marker;

google.maps.event.addListener(map, 'zoom_changed', function() {

zoom=map.getZoom();

for (var i = 0; i < marcadores.length; i++) {

var marcador = marcadores[i];

if(zoom==21){marcador.setIcon(new google.maps.MarkerImage('img/accidente.png', null, null, null, new google.maps.Size(1900, 1900)));}

Valora esta respuesta

Comentar

ejecutar una funcion con addEventListener

Pausar función hasta que no acepte en alert