Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Cambiar el tamaño de los iconos haciendo zoom en Google Maps

Estas en el tema de Cambiar el tamaño de los iconos haciendo zoom en Google Maps en el foro de Frameworks JS en Foros del Web. Buenas, Es la primera vez que pido ayuda de esta manera, a ver que tal. Tengo un mapa de Google Maps de la ciudad con ...
  #1 (permalink)  
Antiguo 03/10/2014, 13:21
 
Fecha de Ingreso: octubre-2012
Ubicación: Barcelona
Mensajes: 2
Antigüedad: 12 años, 1 mes
Puntos: 0
Cambiar el tamaño de los iconos haciendo zoom en Google Maps

Buenas,

Es la primera vez que pido ayuda de esta manera, a ver que tal.

Tengo un mapa de Google Maps de la ciudad con bastantes iconos con sus correspondiente información. El problema viene al hacer zoom ya que al querer ver toda la ciudad, los iconos se solapan y no queda claro donde está cada punto de interés.
¿Habría alguna manera de que estos iconos puedan reducirse o ampliarse dependiendo del nivel de zoom?

Os dejo un pequeño fragmento de como lo estoy llevando.
Cualquier ayuda será más que bienvenida.


Código HTML:
var Bounds = new google.maps.LatLngBounds();
var posicion = []; 
var puntos = [];

var markers = [];

var infowindowActivo = false;
var map;

posicion[0]=new google.maps.LatLng(41.3857764159241, 2.1697354316711426);
puntos[0]=["Catalunya", posicion[0], 'puntoblanco', "Plaza Catalunya de Barcelona"];
Bounds.extend(posicion[0]);

posicion[1]=new google.maps.LatLng(41.42103206129173, 2.186955213546753);
puntos[1]=["La Sagrera", posicion[1], 'puntoblanco', "Este es el barrio de La Sagrera"];
Bounds.extend(posicion[1]);

posicion[2]=new google.maps.LatLng(41.40407053644302, 2.173898220062256);
puntos[2]=["Sagrada Familia", posicion[2], 'puntonegro', "Esta es la zona turística de Sagrada Familia"];
Bounds.extend(posicion[2]);
	
puntoblanco = {
	path: google.maps.SymbolPath.CIRCLE,
	scale: 6,
	strokeColor: "#FFF",fillColor: "#000",strokeWeight: 2, fillOpacity: 1, strokeOpacity: 1.0							
};
	
puntonegro = {
	path: google.maps.SymbolPath.CIRCLE,
	scale: 6,
	strokeColor: "#000", fillColor: "#FFF", strokeWeight: 2, fillOpacity: 1, strokeOpacity: 1.0							
};

function initialize() {	
	var mapOptions = {
		minZoom: 9, 
		mapTypeId: google.maps.MapTypeId.TERRAIN
	};
	map = new google.maps.Map(document.getElementById('map'), mapOptions);
	map.fitBounds(Bounds);
		
	setGoogleMarkers(map, puntos);
	
	zoomMap=map.getZoom();

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

	});			
}

function setGoogleMarkers(map, locations) {
	
	var n=locations.length;
    for(var i=0; i<n; i++) {
		if (locations[i]){
			// DECLARAMOS VARIABLES
			var elPunto = locations[i];
			var myLatLng = elPunto[1];
						 		
			// INSERTAMOS LOS MARCADORES
			markers[i]=new google.maps.Marker();
			markers[i].setIcon(eval(elPunto[2]));
			markers[i].setMap(map);

			markers[i].setPosition(myLatLng);
			markers[i].setTitle(elPunto[0]);
				
			// AÑADIMOS LA INFORMACION DE CADA MARCADOR
			markers[i].infoWindow=new google.maps.InfoWindow({
				content: elPunto[3],
				maxWidth:300
			});
					
			google.maps.event.addListener(markers[i], 'click', function(){      
				if(infowindowActivo)
					infowindowActivo.close();
				
				infowindowActivo = this.infoWindow;
				infowindowActivo.open(map, this);
			});
		}
    }
}
  #2 (permalink)  
Antiguo 05/10/2014, 08:04
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cambiar el tamaño de los iconos haciendo zoom en Google Maps

Hola Denisuk0:

Creo que la mejor solución es utilizar markerclusterer

Es fácil implementar y, sobre iconos de agrupación (cuyo grado de agrupamiento y tamaño puedes controlar), al pinchar sobre ellos realiza un zoom de acercamiento de forma que ya queden separados y discriminados.
  #3 (permalink)  
Antiguo 06/10/2014, 08:26
 
Fecha de Ingreso: octubre-2012
Ubicación: Barcelona
Mensajes: 2
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Cambiar el tamaño de los iconos haciendo zoom en Google Maps

Gracias por la respuesta, txemaarbulo, pero no era lo que estaba buscando.

Basándome en el ejemplo de Google Maps sobre marcadores: https://developers.google.com/maps/documentation/javascript/examples/icon-complex, estaba buscando alguna manera de que los iconos (en el ejemplo: las banderas) pudieran cambiar de tamaño a medida que se va haciendo zoom, de manera que al alejarse, las banderitas se verían pequeñas y al acercarse, se verían más grandes. En este ejemplo, no cambian de tamaño al alejarse o acercarse.

Gracias
  #4 (permalink)  
Antiguo 06/10/2014, 13:06
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cambiar el tamaño de los iconos haciendo zoom en Google Maps

El tema es así:
Yo tengo un icono del tamaño que fuere (por razones de espacio lo reducimos al tamaño que queremos verlo) e, independientemente de su tamaño, lo defino en javascript al tamaño que quiero verlo
Código Javascript:
Ver original
  1. size: new google.maps.Size(20, 32),

Nunca lo he probado ni he visto página alguna que lo haga. Podría ser que
si el en (ejemplo) zoom:10, el icono será size: new google.maps.Size(20, 32), en zoom;18 (otro tamaño)

Creo que el tema es un poco más complejo, posiblemente porque nos obligue a recargar la página por cada nivel de zoom (estoy cansado de decirle a Google maps en los códigos: te repito el código en mi condicional, pero si me obligas a hacerlo, tu me obligas a recargar la página, lo cual hace la página más lenta y tú, mi$ter. Google Map$, me contabilizas el uso del servicio).

Creo que podríamos intentar hacerlo.
"Lo dificil lo hago al momento. Lo imposible, tardo un poco"

Última edición por txemaarbulo; 11/01/2015 a las 15:32

Etiquetas: google, haciendo, iconos, javascript, maps, tamaño, zoom
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:24.