[SOLUCIONADO] llamada funcion JS desde html

supernino69 · #1 (**permalink**) 02/10/2014, 02:28

Buenas, no entiendo muy bien ya el porque y no consigo hacer bien la llamada.

Tengo una funcion dar_coordenadas(){
.....
.....
var ruta = 'https://www.google.es/maps/place/' + RadToDeg (latlon[0]) + ',' + RadToDeg (latlon[1]) ;
return ruta;
}

Y en mi HTML quiero introducirla en el SRC:

<iframe style="border:solid thin grey;" width="300" height="300" src="AQUI" > </iframe>

El problema es que por mas que intento meterle y concatenarlo no puedo

alguna idea?

quimfv · #2 (**permalink**) 02/10/2014, 06:15

Código Javascript:

Ver originaldar_coordenadas(){
.....
.....
var ruta = 'https://www.google.es/maps/place/' + RadToDeg (latlon[0]) + ',' + RadToDeg (latlon[1]) ;
document.getElementById('elIframe').src=ruta;
}

Código HTML:

Ver original<iframe style="border:solid thin grey;" width="300" height="300" src="" id="elIframe" > </iframe>

Ahora necesitas un evento que ejecute la función, hay muchas opciones

<input name="botBoton" type="button" id="botBoton" onClick="dar_coordenadas()">
Cunado le des click a un botón.

<body onLoad="dar_coordenadas()">
cuando se haya cargado el documento....

supernino69 · #3 (**permalink**) 03/10/2014, 04:21

Realice tus cambios y creo que estaban perfectos, gracias por refrescarme el uso de DOM.

Tengo este problema, la funcion dar coordenadas no me las devuelve correctamente:

Código Javascript:

Ver originalfunction dar_coordenadas(){
 
        var latlon = new Array(2);
        var x, y, zone, southhemi;
        //valida  que estén rellenos los campos de coordenadas
        if (isNaN (parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value)) || 
            isNaN (parseInt (document.getElementById("gen_inmurb_coordenadas_y").value))) {
 
            } else {
                x = parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value);
                y = parseFloat (document.getElementById("gen_inmurb_coordenadas_y").value);
                zone = parseFloat ("30");
                southhemi = false;
                
                UTMXYToLatLon (x, y, zone, southhemi, latlon);
                //abre google maps con la ubicación de las coordenadas
                var ruta = 'https://www.google.es/maps/place/' + RadToDeg (latlon[0]) + ',' + RadToDeg (latlon[1]) ;
 
                var frame = ' <iframe style="border:solid thin grey;" width="300" height="300" src="'+ruta+'" > </iframe>' ;
                document.getElementById('elIframe').src=ruta;
      
        }
    }

Al entrar en la validacion, no pasa y sale.

Y creo que los datos se recogen bien de este html.

Código HTML:

Ver original<input class="texto" id="gen_inmurb_coordenadas_x" name="gen_inmurb_coordenadas_x" value=""> , 
                <input class="texto" id="gen_inmurb_coordenadas_y" name="gen_inmurb_coordenadas_y" value="">

Cual puede ser el problema?

quimfv · #4 (**permalink**) 03/10/2014, 06:15

Código PHP:

Ver originalif (isNaN (parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value)) ||
            isNaN (parseInt (document.getElementById("gen_inmurb_coordenadas_y").value))) {
 
            } else {...

Esto seria muncho mas elegante

Código PHP:

Ver originalif (!isNaN (parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value)) &&
            !isNaN (parseInt (document.getElementById("gen_inmurb_coordenadas_y").value))) {...

Con lo que muestras no se puede saber si en el momento de ejecutar la función los inputs tienen valores o no tienen

Código Javascript:

Ver originalfunction dar_coordenadas(){
 
        var latlon = new Array(2);
        var x, y, zone, southhemi;
        //valida  que estén rellenos los campos de coordenadas
        alert("Y:"+document.getElementById("gen_inmurb_coordenadas_y").value+"\nX:"+document.getElementById("gen_inmurb_coordenadas_X").value);
        if (!isNaN (parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value)) &&
            !isNaN (parseInt (document.getElementById("gen_inmurb_coordenadas_y").value))) {
                x = parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value);
                y = parseFloat (document.getElementById("gen_inmurb_coordenadas_y").value);
                zone = parseFloat ("30");
                southhemi = false;
                
                UTMXYToLatLon (x, y, zone, southhemi, latlon);
                //abre google maps con la ubicación de las coordenadas
                var ruta = 'https://www.google.es/maps/place/' + RadToDeg (latlon[0]) + ',' + RadToDeg (latlon[1]) ;
 
                var frame = ' <iframe style="border:solid thin grey;" width="300" height="300" src="'+ruta+'" > </iframe>' ;
                document.getElementById('elIframe').src=ruta;
      
        }
    }

Asi sabras si tienen valores....

supernino69 · #5 (**permalink**) 06/10/2014, 01:06

Se que tienen valores,porque les muestro en otra zona, y les introduzco correctamente.

Ademas de que si uso la funcion coordenada() para que me habra un boton una ventana con su localizacion lo hace perfectamente.

Código Javascript:

Ver originalfunction coordenadas(){
        var latlon = new Array(2);
        var x, y, zone, southhemi;
        //valida  que estén rellenos los campos de coordenadas
        if (isNaN (parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value)) || 
            isNaN (parseInt (document.getElementById("gen_inmurb_coordenadas_y").value))) {
            alert ("Debe rellenar ambas coordenadas UTM con números válidos");
            } else {
                x = parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value);
                y = parseFloat (document.getElementById("gen_inmurb_coordenadas_y").value);
                zone = parseFloat ("30");
                southhemi = false;
                UTMXYToLatLon (x, y, zone, southhemi, latlon);
                //abre google maps con la ubicación de las coordenadas
                window.open('https://www.google.es/maps/place/' + RadToDeg (latlon[0]) + ',' + RadToDeg (latlon[1]),'_blank');
        }
    }

He realizado las modificaciones, pero no me devuelve el alert que introduciste.
En cambio, si pongo el alert("hola"); de primeras sí,luego entrar en la funcion entra.

quimfv · #6 (**permalink**) 06/10/2014, 02:36

Cita:

He realizado las modificaciones, pero no me devuelve el alert que introduciste.
En cambio, si pongo el alert("hola"); de primeras sí,luego entrar en la funcion entra.

Si no se ejecuta el alert tienes el error antes del condicional. Pon mi alert donde has puesto alert("hola") y confirma que los valores XY estan. Y luego modifica la declaración de variables.

Google

Cita:

La declaración var en más variables se debe repetir para cada una, o bien debe efectuarse con una interrupción de línea:

var micarácter,
mivariable;

Código Javascript:

Ver originalvar x, 
      y, 
      zone, 
      southhemi;

o

Código Javascript:

Ver originalvar x;
var y; 
var zone;
var southhemi;

(yo siempre uso la segunda.... no recordaba por que!!!!)

supernino69 · #7 (**permalink**) 06/10/2014, 02:48

Ya lo pensé, por ello cambie el nombre de variables y las puse como dijiste:

Código Javascript:

Ver originalalert("hola");
        var latlon1 = new Array(2);
        var a;
        var b;
        var zona;
        var south;
 
        alert("Y:"+document.getElementById("gen_inmurb_coordenadas_y").value+"\nX:"+document.getElementById("gen_inmurb_coordenadas_X").value);

Aun así, sigue dandome algun error.

Puede ser que intente recoger datos que no esten aun puestos y por dar blank falle?

Aun asi, es imposible, puesto que ejecuto primero la carga de los datos de la BD, y deberian estar los datos para poder recogerlos sin problema...

quimfv · #8 (**permalink**) 06/10/2014, 05:16

Código Javascript:

Ver originalalert("Y:"+document.getElementById("gen_inmurb_coordenadas_y").value+"\nX:"+document.getElementById("gen_inmurb_coordenadas_X").value);
            var latlon1 = new Array(2);
            var a;
            var b;
            var zona;
            var south;

La unica manera de saber si estan o no es que te los muestre en un alert.

Por cierto la sintaxis de mi alert es correcta, lo he ejecutado habiendo creado los dos inputs...

supernino69 · #9 (**permalink**) 06/10/2014, 05:48

Vale, corregido una tonteria y funciona la parte de la coordenada, quedaria así:

Código Javascript:

Ver originalfunction dar_coordenadas(){
        
        var latlon1 = new Array(2);
        var a;
        var b;
        var zona;
        var south;
 
        
        //valida  que estén rellenos los campos de coordenadas
        if (!isNaN (parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value)) &&
            !isNaN (parseInt (document.getElementById("gen_inmurb_coordenadas_y").value))) {
                a = parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value);
                b = parseFloat (document.getElementById("gen_inmurb_coordenadas_y").value);
                zona = parseFloat ("30");
                south = false;
 
                UTMXYToLatLon (a, b, zona, south, latlon1);
                //abre google maps con la ubicación de las coordenadas
                var ruta = 'https://www.google.es/maps/place/' + a + ',' + b ;
 
                document.getElementById('elIframe').src=ruta;
           
        }
         
    }

A pesar de ello, no entra el frame en:

Código HTML:

Ver original<div  class="float-right" >
   
    <div id="mapa">
           <iframe style="border:solid thin grey;" width="300" height="300" src="" id="elIframe" > </iframe>
    </div>
   
</div>

Y se queda así:

En verdad aparecen todos los datos, pero deje solo las coordenadas para que lo veas.

quimfv · #10 (**permalink**) 06/10/2014, 06:09

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript" type="text/JavaScript">
function dar_coordenadas(){
        
        var latlon1 = new Array(2);
        var a;
        var b;
        var zona;
        var south;
 
        
        //valida  que estén rellenos los campos de coordenadas
        if (!isNaN (parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value)) &&
            !isNaN (parseInt (document.getElementById("gen_inmurb_coordenadas_y").value))) {
                a = parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value);
                b = parseFloat (document.getElementById("gen_inmurb_coordenadas_y").value);
                zona = parseFloat ("30");
                south = false;
                        
                alert("a:"+a+"\nb:"+b+"\nzona:"+zona+"\nsouth:"+south+"\nlatlon1:"+latlon1);
                
                 //No tengo esta funcion por lo que no se si funciona
                //UTMXYToLatLon (a, b, zona, south, latlon1);
                //abre google maps con la ubicación de las coordenadas
                var ruta = 'https://www.google.es/maps/place/' + a + ',' + b ;
                
                 alert(ruta);
                //Otra ruta
                
                ruta="https://www.araeslhora.cat/es";
                
                document.getElementById('elIframe').src=ruta;
           
        }
         
    }
</script>
<body>
<input name="gen_inmurb_coordenadas_x" type="text" id="gen_inmurb_coordenadas_x">
<input name="gen_inmurb_coordenadas_y" type="text" id="gen_inmurb_coordenadas_y">
<input name="botDarCoordenadas" type="button" id="botDarCoordenadas" onClick="dar_coordenadas()" value="Ver mapa">
<div  class="float-right" >
   
    <div id="mapa">
           <iframe style="border:solid thin grey;" width="300" height="300" src="" id="elIframe" > </iframe>
    </div>
   
</div></body>
</html>

He creado dos inputs con los nombres que usas y un boton para llamar la función, tambien he intercalado alerts para que se vea con que información trabaja la función, he comentado la función UTMXYToLatLon () para que no intente ejecutarla, yo no la tengo. Hasta aquí no puedo hacer más puesto que no se si los datos son los que deben ser.

Efectivamente el iframe no se carga con la url que se construye con la función pero si lo hace con otras url.

Estas seguro que google permite cargar en un iframe sus mapas con la url construida como lo estas haciendo?

Es decir

Código HTML:

Ver original<div  class="float-right" >
   
    <div id="mapa">
           <iframe style="border:solid thin grey;" width="300" height="300" src="https://www.google.es/maps/place/xxxxx,yyyyy" id="elIframe" > </iframe>
    </div>
   
</div>

si subtituimos xxxxx e yyyyyy por coordenadas reales, se carga el iframe?

supernino69 · #11 (**permalink**) 06/10/2014, 06:20

No carga...

Para enviarlo a una nueva pantalla funciona perfectamente, pero en iframe no.

Sabes otra forma de poder introducirlo?

Tecna · #12 (**permalink**) 06/10/2014, 06:23

Buenas.

Cita:
"La declaración var en más variables se debe repetir para cada una, o bien debe efectuarse con una interrupción de línea:"

La cita anterior no es correcta, se pueden declarar e inicializar múltiples variables con la misma palabra var separándolas con comas.

quimfv · #13 (**permalink**) 06/10/2014, 06:52

Cita:

Iniciado por Tecna

Buenas.

Cita:
"La declaración var en más variables se debe repetir para cada una, o bien debe efectuarse con una interrupción de línea:"

La cita anterior no es correcta, se pueden declarar e inicializar múltiples variables con la misma palabra var separándolas con comas.

Cierto.

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript" type="text/JavaScript">
function dar_coordenadas(){
        
        var latlon1 = new Array(2);
        var a, b, zona, south;
 
        
        //valida  que estén rellenos los campos de coordenadas
        if (!isNaN (parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value)) &&
            !isNaN (parseInt (document.getElementById("gen_inmurb_coordenadas_y").value))) {
                a = parseFloat (document.getElementById("gen_inmurb_coordenadas_x").value);
                b = parseFloat (document.getElementById("gen_inmurb_coordenadas_y").value);
                zona = parseFloat ("30");
                south = false;
                        
                alert("a:"+a+"\nb:"+b+"\nzona:"+zona+"\nsouth:"+south+"\nlatlon1:"+latlon1);
                
                 //No tengo esta funcion por lo que no se si funciona
                //UTMXYToLatLon (a, b, zona, south, latlon1);
                //abre google maps con la ubicación de las coordenadas
                var ruta = 'https://www.google.es/maps/place/' + a + ',' + b ;
                
                 alert(ruta);
                //Otra ruta
                
                
                document.getElementById('elIframe').src=ruta;
           
        }
         
    }
</script>
<body>
<input name="gen_inmurb_coordenadas_x" type="text" id="gen_inmurb_coordenadas_x">
<input name="gen_inmurb_coordenadas_y" type="text" id="gen_inmurb_coordenadas_y">
<input name="botDarCoordenadas" type="button" id="botDarCoordenadas" onClick="dar_coordenadas()" value="Ver mapa">
<div  class="float-right" >
   
    <div id="mapa">
           <iframe style="border:solid thin grey;" width="300" height="300" src="" id="elIframe" > </iframe>
    </div>
   
</div></body>
</html>

supernino69 · #14 (**permalink**) 07/10/2014, 02:51

quimfv , con iframe no me permite abrir la ruta dada que sería "https://www.google.es/maps/place/" + longitud + lat O coordenadas UTM , mientras que al abrir una nueva ventana si que me funciona.

Cual sería la otra forma de integrar una imagen de google maps dado por coordenadas UTM?

quimfv · #15 (**permalink**) 07/10/2014, 03:59

Como sabras la fuente esta aquí

http://www.google.com/intx/es/enterp...FSXHtAodpjkA8w

y más concretamente aquí

https://developers.google.com/maps/d...on/embed/guide

Código HTML:

Ver original<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY
    &q=Space+Needle,Seattle+WA">
</iframe>