Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/10/2014, 13:21
Denisuk0
 
Fecha de Ingreso: octubre-2012
Ubicación: Barcelona
Mensajes: 2
Antigüedad: 11 años, 6 meses
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);
			});
		}
    }
}