[SOLUCIONADO] variable de un mapa JavaScript a php

[Nass]

Buenas, estoy haciendo un sitio web que me han mandado en clase sobre sacar billetes de buses en php, para poner origen y destino he conseguido un mapa de España en google, el mapa está echo en Javascript pero tengo un problema, cuando selecciono una ciudad me aparece la típica ventana de alert de javascript en que me dice: has seleccionado: y la ciudad que he seleccionado. Lo que quiero es que dicha ciudad se transfiera a una caja de texto echa en PHP. He intentado lo de document.write(variable) pero nada..

Gracias de antemano.

Este es una parte del código:

Código PHP:

                 <div id="map"></div><br/><br/><br/>
                  <script type="text/javascript">
                    new SpainMap({
                      id: 'map',
                      width: 500,
                      height: 300,
                      fillColor: "#eeeeee",
                      strokeColor: "#cccccc",
                      strokeWidth: 0.7,
                      selectedColor: "#66bbdd",
                      animationDuration: 200,
                      onClick: function(province, event) {
                        var destinoJs = province.name;
                        alert("Has seleccionado " + destinoJs);
                      }
                      //onMouseOver: function(province, event) {
                      //  console.log('Navigating through ' + province.name);
                      //},
                      //onMouseOut: function(province, event) {
                      //  console.log('Leaving ' + province.name);
                      //}
                    });
                  </script>
                <p>
                    <?php
                        $variablephp = "<script> document.write(destinoJs) </script>";
                        echo "La ciudad es: ".$variablephp;
                        echo "<br/><br/>";
                        echo "Destino: <input type='text' id='map'  onClick='(document.write(destinoJs))'; name='destino' style='width: 178px; value='' size='15'>";
                    ?>
                </p>  

en la línea alert("Has seleccionado " + destinoJs); destinoJs es la ciudad que quiero que me aparezca en la caja de texto del php de abajo, he intentado mil cosas sin resultado alguno, si alguien me puede ayudar se lo agradecería mucho :P

[danny_]

En el value de input text no estás insertando nada, prueba con esto al lanzar el evento que genera ese alert.

Código Javascript:

document.getElementById('map').value=destinoJs;
 

Nota además que las comillas del value del formulario no las estás cerrando.

Suerte!

[Alexis88]

document.write muestra una línea de caracteres (y otros tipos de datos) en el documento, no dentro de un elemento del documento. Para ese caso, utiliza value.

Código Javascript:

onClick: function(province, event) {
    var destinoJs = province.name;
    document.getElementById('map').value = destinoJs;
    alert("Has seleccionado " + destinoJs);
}
 

Y a la caja de id "map", quítale el evento onClick porque está de más. Prueba con eso y cuéntanos cómo te fue. Saludos.

[Nass]

Os agradezco mucho las respuestas chicos pero nada, he puesto esto asi y lo mismo, cliqueo una ciudad del mapa y solo me aparece la ciudad en el alert, en la caja de texto no. Igual me he dejado algo, echarle un vistazo por favor, en el value de la caja he probado con map y dejandola vacía sin resultado.
Gracias de antemano, el codigo con la línea que me habeis ofrecido:

Código PHP:

                 <div id="map"></div><br/><br/><br/>
                  <script type="text/javascript">
                    new SpainMap({
                      id: 'map',
                      width: 500,
                      height: 300,
                      fillColor: "#eeeeee",
                      strokeColor: "#cccccc",
                      strokeWidth: 0.7,
                      selectedColor: "#66bbdd",
                      animationDuration: 200,
                      onClick: function(province, event) {
                        var destinoJs = province.name;
                        document.getElementById('map').value = destinoJs;              //la línea que me habeís citado
                        alert("Has seleccionado " + destinoJs);
                      }
                      //onMouseOver: function(province, event) {
                      //  console.log('Navigating through ' + province.name);
                      //},
                      //onMouseOut: function(province, event) {
                      //  console.log('Leaving ' + province.name);
                      //}
                    });
                  </script>
                <p>
                    <?php
                        $variablephp = "<script> document.write(destinoJs) </script>";
                        echo "La ciudad es: ".$variablephp;
                        echo "<br/><br/>";
                        echo "Destino: <input type='text' id='map' name='destino' style='width: 178px;' value='map' size='15'>";
                    ?>
                </p>  

Otra pregunta sería: aparte de la caja de texto, si quisiera meter el nombre de la ciudad en una variable normal de php como lo he intentado aquí como sería?

$variablephp = "<script> document.write(destinoJs) </script>";
echo "La ciudad es: ".$variablephp;

Como dice Alexis88 con el método write no podría, entonces como es?
Gracias a todos los que me intentais ayudar :P

[danny_]

Creo que lo que necesitas es aprender como funciona el DOM y los selectores de javascript. Échale un vistazo al siguiente enlace.

http://librosweb.es/javascript/capitulo_5.html


Un saludo!!

[Alexis88]

No estoy seguro de que tenga algo que ver, pero por si las dudas, ponle otro id a la caja porque veo que en el objeto SpainMap hay una variable id con ese mismo nombre. Prueba cambiando el id de la caja a "mapa" y en la función también en la línea document.getElementById('mapa').value. A la caja no es necesario que le des un valor por defecto. Saludos.

[Nass]

Perfecto¡¡¡
eso que acabas de decir lo hice un poco antes de leer lo que me has puesto y era esa la solucion, creo que creaba conflicto con la id map tal y como me has puesto, ahora se me escribe la ciudad que clickeo en la caja de texto muchas gracias Alexis88, de todas formas quería saber si hay forma de en vez de poner la ciudad en la caja de texto poder ponerla en una simple variable php para poder jugar con ella.

Gracias a todos¡¡¡ :P

[Nass]

Tema solucionado, gracias por vuestra ayuda ! ! ! ! !=)

[Alexis88]

Si mal no recuerdo, para tomar un valor generado en JavaScript y asignarlo a una variable en PHP, necesitas usar JSON. Te sugiero que averigües al respecto para que puedas desarrollar proyectos como este y otros más complejos en el futuro sin mayores problemas.

Saludos.

[Nass]

Muchas gracias Alexis88, otra pregunta que me ha surgido, el mapa lo quiero usar dos veces y resulta que no puedo, estas son las líneas que uso en el primero:

<script type="text/javascript" src="lib/raphael-min.js"></script>
<script type="text/javascript" src="lib/spain-map.js"></script>

<div id="map" style="display:none;"></div>
<script type="text/javascript">
new SpainMap({
id: 'map',
width: 500,
height: 300,
fillColor: "#eeeeee",
strokeColor: "#cccccc",
strokeWidth: 0.7,
selectedColor: "#66bbdd",
animationDuration: 200,
onClick: function(province, event) {
var destinoJs = province.name;
document.getElementById('origen').value = destinoJs;
alert("Has seleccionado " + destinoJs);
}
//onMouseOver: function(province, event) {
// console.log('Navigating through ' + province.name);
//},
//onMouseOut: function(province, event) {
// console.log('Leaving ' + province.name);
//}
});
</script>

He tratado de copiar pegar y cambiar la id pero nada :S
alguna idea?

[Nass]

Solucionado xD

[caricatos]

Hola:

Me extraña que tratándose de un mapa de España no te hayas topado con el mío.

Siguiendo los enlaces podrás encontrar un sistema de captura de coordenadas que difícilmente podrás encontrar algo parecido, y ya que estás en etapa de aprendizaje, tal vez te interese el formato de imágenes svg... en otros apuntes puedes encontrar más referencias...

Ahora viendo que te han aconsejado el uso de json, yo te lo voy a desaconsejar; ya que no he podido encontrar referencias al uso de json en páginas accesibles (sin dependencia de javascript)... no desatiendas ese concepto.

Sobre los pasos de parámetros, normalmente es añadir a la url las parejas variable=valor; y para variables del tipo array basta que se repitan para poderlas recoger por url; y si los arrays se deben procesar con php, solo deben terminar en un juego de corchetes...

Saludos

[Alexis88]

La alternativa de caricatos es totalmente válida, mediante el método GET puedes enviar variables generadas en JavaScript. Antes lo hacía directamente con location.href y concatenando las variables y valores al url, pero ahora estoy explorando más en el campo de jQuery y usando JSON también puedo hacer ese procedimiento.

Pero bueno, siempre hay más de una manera de dar solución a un problema. Saludos amigos.

[Nass]

muchas gracias caricatos y alexis88, vuestra respuestas me han sido de gran ayuda¡¡¡
De momento voy a probar con el método get del cual estoy más acostumbrado aver qué tal.

Un saludo.

[Nass]

Hola chicos, he estado informandome del método get entre Javascript y php, por lo que veo su función es basicamente la misma que de php, pasa por una especie de enlace pero sólo pasa cuando pulsas el boton submit del formulario no? es decir, viaja por el servidor, yo no quiero eso, lo que quería era sin viajar por el servidor, antes de darle al botón submit del formulario que Javascript nme mande esa variable a php, mas arriba me han dicho que no puedo usar la función document.write que es la que encontré..

Un saludo