0

Que tal ando trabajando con php y google maps y me salió un proyecto en el cual se pueda introducir coordenadas y el mapa te lleve a ellas pero dentro de un sistema (lo que hace google maps pero que trabaje en mi sistema), busque en varios lugares y no encuentro referencias, estoy probando uno pero sin éxito: este es mi archivo index.php

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<form action="" method="post">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<input type='text' name='searchAddress' class="form-control" placeholder='Enter address here'/>
</div>
</div>
<div class="form-group">
<input type='submit' value='Find' class="btn btn-success" />
</div>
</div>
</form>
<?php
if($_POST) {
// get geocode address details
$geocodeData = getGeocodeData($_POST['searchAddress']);
if($geocodeData) {
$latitude = $geocodeData[0];
$longitude = $geocodeData[1];
$address = $geocodeData[2];
?>
<div id="gmap">Loading map...</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=API_KEYXXXXXX"></script>
<script type="text/javascript">
function init_map() {
var options = {
zoom: 14,
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($("#gmap")[0], options);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
});
infowindow = new google.maps.InfoWindow({
content: "<?php echo $address; ?>"
});
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<?php
} else {
echo "Incorrect details to show map!";
}
}
?>

este es el archivo functions.php

<?php
function getGeocodeData($address) {
$address = urlencode($address);
$googleMapUrl = "https://maps.googleapis.com/maps/api/geocode/json?address= {$address}&key=API_KEYXXXXXX";
$geocodeResponseData = file_get_contents($googleMapUrl);
$responseData = json_decode($geocodeResponseData, true);
if($responseData['status']=='OK') {
$latitude = isset($responseData['results'][0]['geometry']['location']['lat']) ? 
$responseData['results'][0]['geometry']['location']['lat'] : "";
$longitude = isset($responseData['results'][0]['geometry']['location']['lng']) ? 
$responseData['results'][0]['geometry']['location']['lng'] : "";
$formattedAddress = isset($responseData['results'][0]['formatted_address']) ? 
$responseData['results'][0]['formatted_address'] : "";
if($latitude && $longitude && $formattedAddress) {
$geocodeData = array();
array_push(
$geocodeData,
$latitude,
$longitude,
$formattedAddress
);
return $geocodeData;
} else {    
return false;
}
} else {
echo "ERROR: {$responseData['status']}";
return false;
}
}

Adjunto una imagen del avance que tengo hasta el momento introducir la descripción de la imagen aquí En el cuadro de búsqueda es donde tiene que entrar el poder introducir coordenadas y me lleve a ellas. Si alguien trabajo con algún proyecto similar, me vendría bien un poco de guía agradecería mucho, espero me de bien a entender. gracias

5
  • A qué te refieres con un sistema local? Que está offline? el 12 ago. 2021 a las 16:15
  • Disculpa esa parte no me explique bien, lo corrijo es que trabaje en mi sistema.
    – DAVE
    el 12 ago. 2021 a las 18:23
  • Lo necesitas por coordenadas Long & Lat y por direcciones, calles y colonias?
    – Jonathan G
    el 12 ago. 2021 a las 23:09
  • Que tal mira lo que necesito es poder ingresar coordenadas por un input, y que de ahí me lleve a ellas, editare y subo una screenshot del avance que tengo. gracias
    – DAVE
    el 13 ago. 2021 a las 14:37
  • Te he añadido una respuesta, consúltala y si es válida, márcala como respuesta y le sirve a otros. Saludos. el 20 ago. 2021 a las 1:20

1 respuesta 1

2

Bueno... de mi parte hay dos formas de hacerlo, depende cual te convenga más, sin API y con API.

Vamos con la primera:

Sin API:

Cree un formulario simple que tendrá 2 campos de entrada para ingresar la latitud y longitud a través del campo de entrada y un botón de envío que, al hacer clic, enviará el formulario, ya los detalles ajiconales y personalización del formulario sabrás cómo quieres manejarlo.

<form method="POST">
    <p>
        <input type="text" name="latitude" placeholder="Enter latitude">
    </p>
 
    <p>
        <input type="text" name="longitude" placeholder="Enter longitude">
    </p>
 
    <input type="submit" name="submit_coordinates">
</form>

Ahora necesitas crear un bloque PHP que se ejecutará cuando se envíe el formulario. En ese bloque, obtendrás las coordenadas de latitud y longitud ingresadas por el usuario en variables separadas. Por último, crearemos una etiqueta iFrame y pasaremos esas coordenadas para representar el mapa. Asegúrese de separar los valores usando una coma (,).

<?php
    if (isset($_POST["submit_coordinates"]))
    {
        $latitude = $_POST["latitude"];
        $longitude = $_POST["longitude"];
        ?>
 
        <iframe width="100%" height="500" src="https://maps.google.com/maps?q=<?php echo $latitude; ?>,<?php echo $longitude; ?>&output=embed"></iframe>
 
        <?php
    }
?>

Conclusión Aunque este método tiene algunas limitaciones, por ejemplo, no puede actualizar el marcador una vez que el mapa está completamente cargado. Para cambiar la ubicación del marcador, puede volver a dibujar el mapa. Pero le dará suficiente funcionalidad para que si está recibiendo la latitud y la longitud de la ubicación del usuario desde alguna aplicación de Android / iOS y desea mostrar esa ubicación en el panel de administración. Puede hacerlo fácilmente siguiendo este tutorial. Eso es todo por ahora, si tiene algún problema o necesita ayuda, no dude en preguntar en la sección de comentarios o escribir una nueva pregunta.

El otro método con API:

Vamos a pintar el formulario con este código:

<div>
    <div><strong>Tú puedes encontrar ejemplos de direcciones que se pueden localizar para ver en el mapa:</strong></div>
    <div>1. Hospital La Mancha Centro</div>
    <div>2. C/ Alcalá, 34</div>
 </div>  
 <br>
 <form action="" method="post">
     <div class="row">       
        <div class="col-sm-4">  
           <div class="form-group">
              <input type='text' name='searchAddress' class="form-control" placeholder='Pon la dirección aquí' />
           </div>
        </div>
        <div class="form-group">
           <input type='submit' value='Localizar' class="btn btn-success" />
        </div>
     </div>
 </form> 

Este código está dividido en dos bloques. El primero se encarga de pintar lo que es la información que aparece encima del formulario, mientras que el segundo bloque muestra el formulario donde hay que escribir la dirección. Este formulario está formado por una caja de texto y un botón que se encarga de enviar la petición. Como se puede observar, se trata de un formulario muy sencillo y que no tiene ningún misterio. Dentro de este archivo index.php también colocaremos el código que se encargará de pintar la dirección en el mapa. El código sería el siguiente.

<?php
    if($_POST) { 
      $geocodeData = getGeocodeData($_POST['searchAddress']); 
      if($geocodeData) {         
         $latitude = $geocodeData[0];
         $longitude = $geocodeData[1];
         $address = $geocodeData[2];                     
?> 
<div id="gmap">Cargando mapa...</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=API-KEY"></script> 
<script type="text/javascript">
   function init_map() {
      var options = {
         zoom: 14,
         center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map($("#gmap")[0], options);
      marker = new google.maps.Marker({
         map: map,
         position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
      });
      infowindow = new google.maps.InfoWindow({
          content: "<?php echo $address; ?>"
      });
      google.maps.event.addListener(marker, "click", function () {
           infowindow.open(map, marker);
      });
   }
   google.maps.event.addDomListener(window, 'load', init_map);
</script> 
<?php 
     } else {
        echo "Detalles incorrectos!";
     }
}
?>

En la línea anterior deberíais cambiar “API-KEY” por la cadena de caracteres que tenéis que crear en la página de Google que os hemos indicado más arriba.

Lo siguiente ya es hacer uso del código que se encarga de pintar el mapa y que se trata de funciones que ofrece Google para trabajar con sus mapas.

Archivo functions.php Dentro de este archivo estará la función “getGeocodeData” que hemos utilizado en más arriba. Como hemos dicho, se encarga de hacer la llamada a Google con los datos pasados en el formulario para que nos devuelva la latitud, longitud y demás información asociada a esa petición. Nosotros la hemos colocado en un archivo externo, pero perfectamente podría estar dentro del index.php.

El código de este método es el siguiente:

function getGeocodeData($address) { 
    $address = urlencode($address);     
    $googleMapUrl = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=API-KEY";
    $geocodeResponseData = file_get_contents($googleMapUrl);
    $responseData = json_decode($geocodeResponseData, true);
    if($responseData['status']=='OK') {
        $latitude = isset($responseData['results'][0]['geometry']['location']['lat']) ? $responseData['results'][0]['geometry']['location']['lat'] : "";
        $longitude = isset($responseData['results'][0]['geometry']['location']['lng']) ? $responseData['results'][0]['geometry']['location']['lng'] : "";
        $formattedAddress = isset($responseData['results'][0]['formatted_address']) ? $responseData['results'][0]['formatted_address'] : "";         
        if($latitude && $longitude && $formattedAddress) {         
            $geocodeData = array();                         
            array_push(
                $geocodeData, 
                $latitude, 
                $longitude, 
                $formattedAddress
            );             
            return $geocodeData;             
        } else {
            return false;
        }         
    } else {
        echo "ERROR: {$responseData['status']}";
        return false;
    }
}

En el caso de que el valor del campo “STATUS” sea “OK”, podremos recuperar la información de la consulta realizada. Los valores de la latitud, longitud y dirección, serán colocados en un array que devolverá el método. En el caso de que el valor “STATUS” no sea “OK”, el método devolverá el código asignado a ese campo, impidiendo de esta forma que se pinte el mapa en nuestra página web.

Y listo! Creo que con esto puedes salir a camino!

Si necesitas más información te dejo la fuente que lo explica todo detalladamente de forma clara y muy bien:

Google Maps con coordenadas en PHP

Éxitos y buena suerte!

Tu Respuesta

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

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