Iconos personalizados API google Maps

RhOsS · #1 (**permalink**) 06/11/2009, 05:18

Buenas,

Alguien se manjea con la API de google maps?

Cuando coloco un icono personalizado, no me deja clickear, pero si lo quito y dejo el predeterminado de googla map, funciona perfectamente.

Alguien sabe que ocurre?

Si necesitais que coloce codigo, me lo indicais. Pero el codigo es caogido de una pagina, solo he cambiado la direccion del icono personalizado, me aparece el icono, pero no me deja clickear.

un saludo, gracias.

crujikoki · #2 (**permalink**) 06/11/2009, 05:59

Hola,

Puedes poner el código en cuestión? Así si lo vemos puede que veamos más fácilmente donde está el problema. Yo al menossin ver el código no se que indicación darte...

Saludos!

RhOsS · #3 (**permalink**) 06/11/2009, 07:28

Ahi dejo el codigo, tengo 3 tipos de marcas que depende de unos indices, me carga los iconos donde corresponde pero no me hace el click, si quito la sentencia del GMarker, me carga los iconos predeterminados de google, los naranjas y me deja hacer click pero con iconos personales no... :( no se por que... y es el mismo codigo que hay en un ejempo de google que funciona bien el click: (http://www.guiarte.com/mapas-google/...b/ej_icono.php)

Código:

////////////////////////////////////////////////////////////////
// Funcion que al hacer click en hipervinculo salta el bocadillo  __________________NO FuNCIONA
////////////////////////////////////////////////////////////////  

function clicMarca(marca) {
	if (GBrowserIsCompatible() && cargado) {		
	GEvent.trigger(marca, "click");
	
										   }
						  }
var cargado=false;
//////////////////////////////////////////////////////////////
// Funcion de carga de datos en el mapa
//////////////////////////////////////////////////////////////
function load() {	
	
	//////////////////////////////////////////////////////////////
	// Propiedades del mapa
	//////////////////////////////////////////////////////////////
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		var zoom = 7;
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl()); 
		map.addControl(new GOverviewMapControl()); 
		map.setCenter(new GLatLng(37.352692,-4.746093), zoom);
	
			///////////////////////////////////////////
			// Estilo iconos
			///////////////////////////////////////////
		 	var iconoMarca1 = new GIcon(G_DEFAULT_ICON);	iconoMarca1.image = "green-dot.png";
      		var tamanoIcono1 = new GSize(30,30);	iconoMarca1.iconSize = tamanoIcono1;		
      		var tamanoSombra1 = new GSize(22,18);	iconoMarca1.shadowSize = tamanoSombra1;	iconoMarca1.iconAnchor = new GPoint(11, 16);
		 	var iconoMarca2 = new GIcon(G_DEFAULT_ICON);	iconoMarca2.image = "red-dot.png";
      		var tamanoIcono2 = new GSize(30,30);	iconoMarca2.iconSize = tamanoIcono2;		
      		var tamanoSombra2 = new GSize(22,18);	iconoMarca2.shadowSize = tamanoSombra2;	iconoMarca2.iconAnchor = new GPoint(11, 16);
		 	var iconoMarca4 = new GIcon(G_DEFAULT_ICON);	iconoMarca4.image = "blue-dot.png";
      		var tamanoIcono4 = new GSize(30,30);	iconoMarca4.iconSize = tamanoIcono4;		
      		var tamanoSombra4 = new GSize(22,18);	iconoMarca4.shadowSize = tamanoSombra4;	iconoMarca4.iconAnchor = new GPoint(11, 16);
			




		////////////////////////////////////////////////////////////////////////////////////////////
		// Creacion de puntos y marcadores con su descripcion en el bocadillo
		////////////////////////////////////////////////////////////////////////////////////////////
		function CrearMarca(miMarca,type){		
										//map.addOverlay(miMarca);
										//////////////////////////////////////////////////////
										// Conicion para presentar marcadores segun el zoom...		
										if(type==1)
										{
										mgr.addMarker(miMarca, 7, 7);
										}
										else{
										mgr.addMarker(miMarca, 8, 8);											
										}
										
										
										GEvent.addListener(miMarca, "click", function (punto){
										
											
												
						var html =  "<table><tr><td>Latitud:  </td><?php echo $a; ?>&ordm; <?php echo $minutos_la; ?>' <?php echo $segundos_la; ?>''N <td></tr>" +
      							    "<tr><td>Longitud:  </td><?php echo $grados_lo; ?>&ordm; <?php echo $minutos_lo; ?>' <?php echo $segundos_lo; ?>''W <td></tr>" + punto.x +
  									"<tr><td>NODO: </td><input type='text' id='descripcion' value=<?php echo "NODO_01"; ?> /></td> </tr>" +
 									"<tr><td>Descripcion: </td><td><input type='text' id='descripcion' value=<?php echo "Descripcion_01"; ?> /></td> </tr>" +
  									"<tr><td>Tipo: </td> <td><select id='type'>" +
									"<option value='1' SELECTED>1</option>" +  "<option value='2'>2</option>" +
       						 		"<option value='4'>4</option>" +  "</select> </td></tr>" +
								    "<tr><td><input type='button' value='Grabar' onclick='saveData()'/></td>" +
									"<td><input type='button' value='Borrar' onclick='deleteData()'/></td>" +
									"<td><input type='button' value='Inicio Arco' onclick='inicioArco(punto)'/></td>" +
									"<td><input type='button' value='Fin Arco' onclick='finArco()'/></td></tr></table>";			
									miMarca.openInfoWindowHtml(html);	});
									return miMarca;		
									}

			
			
		    	<?php

						$conexion=mysql_connect("localhost","root",'root'); mysql_select_db("gol");
						$resultado=mysql_query('SELECT * FROM nodos ',$conexion);
					 
						$i=0;
						while($fila = mysql_fetch_array($resultado))
						{
						$la[$i]=$fila["la"];
						$lo[$i]=$fila["lo"];
						$Tipo[$i]=$fila["Tipo"];
						$nombre[$i]=$fila["Descripcion"];
						$nodo[$i]=$fila["Nodo"];
						
						
						?>
						
						var type = <?php echo $Tipo[$i]; ?>;
						var la= <?php echo $la[$i]; ?>;
						var lo=<?php echo $lo[$i]; ?>;
						
						var mgr = new MarkerManager(map);
						
						var point = new GLatLng(<?php echo $la[$i]; ?> , <?php echo $lo[$i]; ?>);	
							
						var miMarca = new GMarker(point, iconoMarca<?php echo $Tipo[$i]; ?>, { draggable: true});			//   
						
					
						CrearMarca(miMarca,type);
						

						<?php
						$i++;
						}	
						
						$reg_nodos=$i;
						mysql_close();
						?>

marcelogdiaz · #4 (**permalink**) 09/11/2009, 06:58

Buenas! Tengo un par de preguntas...carga el ícono o falla al intertar cargarlo? Usaste alguna herramienta como Firebug para ver si hay algún error durante la ejecucion? (Quizá halla alguna error en JS que hace que no se ejecute el evento)

Sugerencias:
- instalar el Firebug para Firefox y ver si se produce algun error.
-separar el JS del PHP, para tener mejor organizado el codigo y que el PHP retorne algun XML/JSON que sea consumido (parseado) en JS.

Exitos!

crujikoki · #5 (**permalink**) 10/11/2009, 01:39

Hola,

Mira viendo tu código casi me mareo, por uqe lo tienes mezclado con el PHP y es un poco tedioso...

Te pongo un código que hice hace un par de años a ver si te ayuda a solucionar tu problema:

Código:

	imagen=opcionColor+etiqueta+".png";
							
	var icono = new GIcon();
	icono.image = "../../../imagenes/markers/"+imagen;
	icono.shadow = "http://maps.google.com/intl/es_ALL/mapfiles/shadow50.png";
	icono.iconSize = new GSize(20.0, 34.0);
	icono.shadowSize = new GSize(37.0, 34.0);
	icono.iconAnchor = new GPoint(9.0, 34.0);
	icono.infoWindowAnchor = new GPoint(9.0, 2.0);
						    
	var opciones = {icon: icono, title: "Marca "+(num+1), draggable: true};
	marker = new GMarker(latlng,opciones);
	ind = markers.length;
	markers[ind]= marker;
	infoWindows[ind] = "";
	map.addOverlay(marker);
	num++;
	marker.bindInfoWindowHtml("Puedes editar el contenido para<br>a\u00f1adir comentarios o imagenes.");
	GEvent.addListener(marker, "dragstart", function() {
	marker.closeInfoWindow();}

Piensa que es parte de un código mucho más grande y puede que haya variables por el medio que no estén definidas en este trozo del código. Como por ejemplo la variable imagen se construye con el resultado de dos selects que no aparecen por aquí.

También puede ser que haya algún parentesis o alguna llave mal puesta que se me haya colado, pero diriía que está todo ok. Hay partes que he eliminado como la teiqueta del marcador. Le he puesto solo un texto, pero en realidad había botnes con otras funciones JS. Para no liar las he quitado. Espero que te sirva.

Si tienes alguna duda me lo comentas!

RhOsS · #6 (**permalink**) 21/11/2009, 14:07

Ey buenas, gracias por las respuestas.

al final solucione lo del click, desactive la opcion de arrastrar y asi se activo solo el click, no se el caso que funciona.

Ya tengo el proyecto bastante avanzado, cada dia es mas complejo y con mas detalles, ahora ando con el tamaño de icono, estoy representando el icono con diferents tamaños para medir un % de un dato logistico, entonces el icono sera mas grande o menos, lo que estoy atascado es que el click del icono no se exactamente donde lo hace, y me gustaria controlar ese punto creeis que es posible?

Puedo controlar la posicion relativa al Point del icono, pero imaginate que el icono es enorme, para exajerarlo un poco, pues veo que el click me lo hace en una esquina superior izquierda, seria posible definir el punto donde deberia hacer click?

Un saludo, gracias.