Localizador de direcciones con Google Maps mediante PHP

Llamamos geocodificación al proceso de convertir una dirección en coordenadas geográficas con el fin de mostrarla en un mapa. Por ejemplo, si cuentas con una dirección concreta y deseas ubicarla en un mapa o si, por ejemplo, deseas crear un localizador de tiendas, la API de Google Maps puede serte de gran ayuda. Lo único que tienes que hacer es pasar dicha dirección a la API y ésta devolverá la respuesta en formato JSON o XML. Mediante este código, mostraremos la dirección en un mapa.

Por lo tanto, en este tutorial aprenderemos a implementar un localizador de direcciones con la API de Google Maps. Para ello contaremos con una caja de texto en la que el usuario tendrá que ingresar una dirección concreta. Una vez introducida la dirección, el usuario pulsará en el botón para enviar el formulario y se mostrará en un mapa el punto exacto donde está ubicada la dirección introducida.

¿Todo claro? Pues bien, vamos a ver cómo crear un localizador de direcciones con Google Maps mediante PHP

• index.php
• functions.php
• style.css

Incluir Bootstrap, jQuery y CSS

Para nuestro HTML de ejemplo utilizaremos Bootstrap, por lo que en el archivo index.php tendremos que incluir la librería Bootstrap y también jQuery para mostrar el mapa con Google Maps. También incluiremos el archivo CSS style.css para personalizar nuestro mapa.

<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" />

Crear un formulario HTML para introducir la dirección

En el fichero index.php, crearemos un formulario HTML en el que el usuario podrá introducir una dirección y un botón para mostrar dicha dirección en un mapa.

<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>

Crear la función de geocodificación

En el functions.php crearemos la función getGeocodeData para obtener la latitud, la longitud y la información de la dirección en formato JSON de la dirección que ha introducido el usuario y devolveremos un array que más tarde utilizaremos en nuestro mapa. Por supuesto, para llevar a cabo esto debes contar con una key de Google Maps.

function getGeocodeData($address) {
$address = urlencode($address);
$googleMapUrl = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=YOUR_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;
}
}

Mostrar la dirección en el mapa con un marcador

Ahora, por último, añadimos el código necesario para mostrar la dirección en el mapa con un marcador. Llamaremos a la función de PHP getGeocodeData() para obtener la respuesta a la geocodificación y se lo pasaremos al mapa.

<?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=YOUR_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);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<?php
} else {
echo "Incorrect details to show map!";
}
}
?>