0

Me dirijo a vosotros porque tengo el siguiente problema: tengo una función javascript a la cual pasándole una dirección me la convierte a coordenadas y me geolocaliza en un mapa dicha dirección, el problema viene porque quiero recuperar esas coordenadas y meterlas en un input text; adjunto código para una mejor comprensión.

</div>
<div class="form-group col-md-1">
    <input type="hidden" class="form-control"
        value="<?php print($data->DFC_TVI);?>/<?php print  ($data->DFC_NVI)  ;?> <?php print  ($data->DFC_NVIA_I)  ;?>,<?php print  ($data->DFC_CDP)  ;?>, <?php print  ($data->DFC_NLO)  ;?> "
        id="search">
</div>
<hr>
<center>
    <div class="alert alert-info" role="alert">
        Per a mostrar la ubicació real del pacient si us plau premi el botó <a href="#" class="alert-link"> MOSTRAR
            DIRECCIÓ EN EL MAPA</a>.
    </div>
    <div class="form-group col-md-1">
        <input type="button" class="btn btn-danger" value="MOSTRAR DIRECCIÓN EN EL MAPA" onClick="mapa.getCoords()">
    </div>
</center>

<div id="mapa" style="width:100%;height:400px;"> </div>
<div>
    <p id="coordenadas"></p>
</div>

<body onload="mapa.initMap()">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=miapikey&callback=myMap"></script>

    <script>
        mapa = {
            map: false,
            marker: false,

            initMap: function () {

                // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar.

                mapa.map = new google.maps.Map(document.getElementById('mapa'), {
                    center: {
                        lat: 41.376284,
                        lng: 2.160069
                    },
                    scrollwheel: false,
                    zoom: 17,
                    zoomControl: true,
                    rotateControl: true,
                    mapTypeControl: true,
                    streetViewControl: true,
                });

                // Creamos el marcador
                mapa.marker = new google.maps.Marker({
                    position: {
                        lat: 41.376284,
                        lng: 2.160069
                    },
                    draggable: true
                });

                // Le asignamos el mapa a los marcadores.
                mapa.marker.setMap(mapa.map);

            },

            // función que se ejecuta al pulsar el botón buscar dirección
            getCoords: function () {
                // Creamos el objeto geodecoder
                var geocoder = new google.maps.Geocoder();

                address = document.getElementById('search').value;
                if (address != '') {
                    // Llamamos a la función geodecode pasandole la dirección que hemos introducido en la caja de texto.
                    geocoder.geocode({
                        'address': address
                    }, function (results, status) {
                        if (status == 'OK') {
                            // Mostramos las coordenadas obtenidas en el p con id coordenadas
                            document.getElementById("coordenadas").innerHTML = 'Coordenadas:   ' +
                                results[0].geometry.location.lat() + ', ' + results[0].geometry.location
                                .lng();
                            // Posicionamos el marcador en las coordenadas obtenidas
                            mapa.marker.setPosition(results[0].geometry.location);
                            // Centramos el mapa en las coordenadas obtenidas
                            mapa.map.setCenter(mapa.marker.getPosition());
                            agendaForm.showMapaEventForm();
                        }
                    });
                }
            }
        }
    </script>

Ahora como podéis ver en el código que me da las coordenadas es:

// Mostramos las coordenadas obtenidas en el p con id coordenadas   
                                  document.getElementById("coordenadas").innerHTML='Coordenadas:   '+results[0].geometry.location.lat()+', '+results[0].geometry.location.lng();

 // Posicionamos el marcador en las coordenadas obtenidas

Al que a su vez imprimo en un div, pero lo que quiero hacer es que en vez de imprimir dicho resultado en un div (como está ahora), imprimirlo en un input para después grabarlo en la base de datos.

1
  • 1
    Simplemente cambia el p por un input y cambia innerHTML por value
    – alanfcm
    Commented el 5 feb. 2020 a las 15:21

1 respuesta 1

1

La idea que propone @alanfcm es cambiar:

<div><p id="coordenadas"></p></div> 

por:

<div><input id="coordenadas" type="text"></div> 

y:

document.getElementById("coordenadas").innerHTML='Coordenadas:   '+results[0].geometry.location.lat()+', '+results[0].geometry.location.lng();

Por:

document.getElementById("coordenadas").value='Coordenadas:   '+results[0].geometry.location.lat()+', '+results[0].geometry.location.lng();
3
  • 1
    Matías Rodríguez Por favor has la atribución de créditos a @alanfcm no estás haciendo algo que no haya sido dicho en su comentario a la pregunta.
    – quevedo
    Commented el 5 feb. 2020 a las 15:41
  • Es verdad! Ya lo hago Commented el 5 feb. 2020 a las 17:30
  • Así si te pude puntuar. Gracias.
    – quevedo
    Commented el 6 feb. 2020 a las 2:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.