No me funciona código para leer coordenadas de un string y presentarlas en GoogleMaps

RodrigoG · #1 (**permalink**) 10/01/2010, 18:25

Hola, la idea es leer por medio de javascript las etiquetas de un blog (entre las cuales se encuentra las coordenadas), luego pasarlas como parametro a la api(?) de Google Maps para que me aparezca un mapita.

Según yo lo siguiente debiera funcionar (pero no lo hace):

Código:

  <head> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1XeAYyd-P_Ccn6bAluyCIRQtNytlzrglaCR_ewOv9N_7M7OiSxR0hxdBHBn1Kq_myCNrHTVe3TxJpQ" 
            type="text/javascript"></script> 
    <script type="text/javascript"> 
 
    var map;
 
    function verMapa() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setUIToDefault();
      map.setCenter(new GLatLng(centro()), 15);
	  map.addOverlay(new GMarker(centro()));
	}

function centro(){
var imput1 = document.getElementById("content-tags").getElementsByTagName('input')[0];
var coordenada = imput1.value.split(/\(|\)/)[1];
return coordenada;
}

    </script> 
  </head> 
 
  <body onload="verMapa()">
  
    <div id="map_canvas" style="width: 200px; height: 400px"></div>

<div id="content-tags"><div class="form-item label-etiquetas"> <span class="label"><label for="auto-complete-1917372">Etiquetas</label></span><br/><input type="text" method="tagComplete" value="Mapa,(-23.5859012, -70.3747365),ejemplos de anuncio, </a>Destacado" size="50" maxlength="255" name="edit[tags]" id="auto-complete-1917372" class="text-field  " autocomplete="off"/><div id="autocomplete-1917372" class="autocomplete " style="display: none;"/>
 <div class="description">Puedes agregar más de una etiqueta separándolas con comas. Ejemplo: <i>cumpleaños,amigos,mi casa</i></div>
</div>
</div>

  </body>

Me explico, el div cuyo id es "content-tags" y todo su contenido viene con el blog y no lo puedo modificar, el código javascript carga el motor de Google Maps y toma como parámetro de coordenadas la función "centro()", la función centro lee el value del input donde están las etiquetas y separa las coordenadas....

¿En donde me equivoco?
Gracias, cualquier ayuda sirve

RodrigoG · #2 (**permalink**) 10/01/2010, 18:27

Ups! pongo el mismo código, pero coloreado :)

Código Javascript:

Ver originalvar map;
 
    function verMapa() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setUIToDefault();
      map.setCenter(new GLatLng(centro()), 15);
      map.addOverlay(new GMarker(centro()));
    }
 
function centro(){
var imput1 = document.getElementById("content-tags").getElementsByTagName('input')[0];
var coordenada = imput1.value.split(/\(|\)/)[1];
return coordenada;
}

Código HTML:

Ver original<body onload="verMapa()">
  
    <div id="map_canvas" style="width: 200px; height: 400px"></div>
 
<div id="content-tags"><div class="form-item label-etiquetas"> <span class="label"><label for="auto-complete-1917372">Etiquetas</label></span><br/><input type="text" method="tagComplete" value="Mapa,(-23.5859012, -70.3747365),ejemplos de anuncio, </a>Destacado" size="50" maxlength="255" name="edit[tags]" id="auto-complete-1917372" class="text-field  " autocomplete="off"/><div id="autocomplete-1917372" class="autocomplete " style="display: none;"/>
 <div class="description">Puedes agregar más de una etiqueta separándolas con comas. Ejemplo: <i>cumpleaños,amigos,mi casa</i></div>
</div>
</div>
 
  </body>

joacoff · #3 (**permalink**) 10/01/2010, 20:54

La verdad no entiendo exactamente que es lo que quieres hacer, podrias postear la direccion del archivo de prueba para ver de que se trata. Si se trata de agregar marcadores a un mapa de Google vas por el camino equivocado, para ello se debe trabajar con el API de Google Maps, si es eso tengo alguna idea de como hacerlo.

RodrigoG · #4 (**permalink**) 11/01/2010, 14:41

Gracias, en realidad está complicado (por no decir mal redactado). Tratare de explicarme mejor:

1) Quiero colocar un mapa de Google Maps.
2) Quiero agregar un marcador a ese mapa.
3) Las coordenadas del marcador se leen de una cadena
4) La cadena está dentro de un input, entre paréntesis.
5) No puedo modificar el código del input.

Cada página distinta tiene un valor distinto en el input, por tanto el código debe ser capaz de leer el valor de este y poner el mapa centrado en el marcador.

Para eso primero tengo la api de Google:

Código Javascript:

Ver original/* Llamada a la clave de la API */
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1XeAYyd-P_Ccn6bAluyCIRQtNytlzrglaCR_ewOv9N_7M7OiSxR0hxdBHBn1Kq_myCNrHTVe3TxJpQ" 
            type="text/javascript"></script> 
 
/* Código para mostrar el mapa */
    <script type="text/javascript"> 
 
    var map;
 
    function verMapa() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setUIToDefault();
      map.setCenter(new GLatLng(centro()), 15);
      map.addOverlay(new GMarker(centro()));
    }
</script>

Donde dice "centro()" debiera ir las coordenadas. En este caso se llama la función centro.

FUNCIÓN CENTRO
La función centro lee el string, separa las coordenadas y las retorna. (En este caso, el centro retorna "-23.5859012, -70.3747365")

Código Javascript:

Ver originalfunction centro(){
// recoge el valor del input:
var imput1 = document.getElementById("content-tags").getElementsByTagName('input')[0];
// Rompe el input en donde exista un "(" o un ")" y guarda las coordenadas:
var coordenada = imput1.value.split(/\(|\)/)[1];
return coordenada;// Retorna las coordenadas.
}

Ahora está el código html, pondre solamente lo relevante (el input que contiene la cadena)

Código HTML:

Ver original<body onload="verMapa()">
  
<! -- El div "map_canvas" muestra el mapa -->
    <div id="map_canvas" style="width: 200px; height: 400px"></div>
 
<!-- En éste div se encuentra el input con la cadena. No tengo permiso para modificar éste código -->
<div id="content-tags"><input type="text" method="tagComplete" value="Mapa,(-23.5859012, -70.3747365),ejemplos de anuncio, </a>Destacado" size="50" maxlength="255" name="edit[tags]" id="auto-complete-1917372" class="text-field  " autocomplete="off"/></div>
 
  </body>

Para probar el código lo hago en
No tengo el código en un archivo :( , soy novato y aún no me arriesgo a pagar un host, en todo caso puedes ver el código en funcionamiento y en tiempo real en la página http://htmledit.squarefree.com, allí sólo se pega el código y se ve el funcionamiento. En el primer post puse el código html completo (con el head y el body).

En realidad cualquier consejo me servirá de ayuda, gracias ;)

joacoff · #5 (**permalink**) 11/01/2010, 15:15

Bueno creo que el problema es que le estas mandando a una funcion del API una cadena de texto(una sola) cuando deberias pasarles dos parametros: La funcion centro() de vuelve una cadena de caracteres con la longitud y la latitud, pero para que GLatLng() debes utilizar dos variables numericas y no una sola string: GLatLng(lat:Number, lng:Number, unbounded?:Boolean)

Un ejemplo:

Código:

//Funcion para agregar marcadores
function createMarker(point,name,html) {
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.shadow = "shadow50.png";
markerOptions = { icon:blueIcon };
var marker = new GMarker(point,markerOptions);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html);});
return marker;
}

//Centrado y altura 5
map.setMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(40.420088,-3.688810), 5);

//Agregando un marcador
var point = new GLatLng(40.420088,-3.688810);
var marker = createMarker(point,'ID','html');
map.addOverlay(marker);

Puede que omita algun punto y coma, la verdad que asi lo hacia yo pero como le saque de entremedio un monton de PHP nunca se sabe.

RodrigoG · #6 (**permalink**) 12/01/2010, 14:33

Efectivamente, el problema es por que paso mal las variables (la función centro()). Haré otra pregunta pero esta vez más específica. Gracias por la ayuda :)