1

Tengo un pequeño trozo de código que con la ayuda de la api de google maps muestra una ruta en dicho mapa desde un punto hasta otro. Tal y cómo muestro abajo

<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/directions?key=MI_API_KEY&origin=<?php echo $localizacion; ?>&destination=<?php echo $_POST['direccion']; ?>&avoid=tolls|highways" allowfullscreen></iframe>

En el destino ($_POST['direccion'];) arroja los datos como la calle, numero, ciudad...

En el origen quiero que aparezca la geolocalizacion del dispositivo como coordenadas por ejemplo, pero no consigo hacerlo

3 respuestas 3

0

En este link hay un ejemplo: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation.

Lo unico que hay que tener en cuenta es que position.coords.latitude nos da la latitud y position.coords.longitude nos da la longitud de forma automática.

1
  • Y como puedo meter las variables lat y long dentro del la ruta?
    – Pelukosa
    Commented el 2 may. 2018 a las 17:01
0

Con el siguiente codigo puedes obtener la latitud y longitud: URL: Obtener coordenadas

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

donde position.coords.latitude es la latitud y position.coords.longitude es la longitud, lo puedes agregar en tu URL de la siguiente manera:

src="https://www.google.com/maps/embed/v1/directions?key=MI_API_KEY&origin=<?php echo $localizacion; ?>&destination=<?php echo $_POST['direccion'] . '/@' . $latitud . ',' . $longitud; ?>&avoid=tolls|highways"

entre $_POST['direccion] y las coordenadas debe tener /@ seguido de las coordenadas

0

tengo un codigo que me permite obtener la ubicación real de usuario con presional un boton, tambien obtiene la latitud y logitud si lo necesita, tener en cuenta que deber cambiar la key de google maps

solo deber copia el codigo y pegalo en el servidor

<section class="col-lg-12 connectedSortable">
    <div class="box box-warning">
        <div class="box-header with-border">
            <h3 class="box-codigo">
                Lista de Arboles
            </h3>
            <button class="btn btn-block btn-primary" id="find_btn" type="button">
                Ubicar mi posición
            </button>
        </div>
        <div class="box-body">
            <div class="">
                <div id="floating-panel">
                </div>
                <div id="map">
                </div>
            </div>
        </div>
    </div>
</section>
<style>
    #map {
       height: 100%;
    }
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script type="text/javascript">
    var map;
    function geocodeLatLng(geocoder, map, infowindow) {
        var input = document.getElementById('latlng').value;
        var latlngStr = input.split(',', 2);
    }


    var nuevosarboles = [0.0,0.0];
    function aaa() {
        alert("si paso");
        mgr.clearMarkers();
    }
    function deleteMarkers() {
        clearMarkers();
        markers = [];
    }
    function initMap(){
        var options = {
        zoom:16,
        center:{lat:4.302314898662877,lng:-74.80926649120488}
    }
     // New map
    map = new google.maps.Map(document.getElementById('map'), options);
    var geocoder = new google.maps.Geocoder;
    var infowindow = new google.maps.InfoWindow;


$("#find_btn").click(function (){
        if("geolocation" in navigator){
            navigator.geolocation.getCurrentPosition(function(position){ 
                infoWindow = new google.maps.InfoWindow({map: map});
                var pos = {lat: position.coords.latitude, lng: position.coords.longitude};
                infoWindow.setPosition(pos);
                map.setZoom(19);
                infoWindow.setContent("Localización del usuario <br/>"+
                    "@can('Arboles Add')"+
                    "<a class='massmodal btn btn-success' href='#' id='massadd-modal' <span class='glyphicon glyphicon-eye-open'></span>Añadir un Árbol</a>"+
                    "@endcan"+
                    //"Lat : "+position.coords.latitude+" </br>Lang :"+ position.coords.longitude
                    "");
                //obtener el latitud y logitud 
                $('#latitud_mass').val(position.coords.latitude);
                $('#longitud_mass').val(position.coords.longitude);
                map.panTo(pos);
               // MostrarArbolesCercanos(position.coords.latitude,position.coords.longitude);
            });
        }else{
            console.log("Su navegador no soporta la Geo-localización ");
        }
});


}
</script>

<style>
    #map {
       height: 100%;
    }
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&callback=initMap"></script>

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.