Mediante el Api de Google Maps y php podemos ingresar una dirección desde un campo de texto o desde una consulta a una base de datos de clientes o tiendas y luego mostrar la ubicación. Esto es muy útil si tenemos varias direcciones en la base de datos ya que el mapa se genera automáticamente.
Es por eso que tenemos el método de geocodificación. Sólo debemos introducir las direcciones y Google Maps tratará de identificar la ubicación aproximada de esta dirección. La dirección de estar conformada por calle y número, ciudad, país.
Tipos Mapas básicos en Google Maps
Google Maps nos permite escoger el tipo de mapa que verán los usuarios, entre las distintas vistas predefinidas encontramos los siguientes tipos de mapas que son compatibles con Google Maps API:
- ROADMAP o HOJA DE RUTA (normal, por defecto mapa 2D)
- SATELLITE o SATÉLITE (mapa fotográfico)
- HYBRID o HIBRIDA (carreteras + mapa fotográfico y nombres de la ciudad)
- TERRAIN o TERRENO (mapa con montañas, ríos, etc)
Ejemplo de utilización del Api Google Maps
Vamos a crear un ejemplo para visualizar la ubicación del Museo del Prado mediante la Api de Google Maps con los datos de latitud y longitud.
Crearemos un archivo index.php y le añadimos el siguiente código:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Google Maps Localizador</title> <script src="https://maps.googleapis.com/maps/api/js"></script> <link rel="stylesheet" type="text/css" href="estilos.css"> </head> <body> <strong>Museo del Prado </strong>/ Latitud: 40.413740 / Longitud: -3.6921 / Zoom: 18 <div id="mapa" ></div> <script> function initialize() { var mapa = document.getElementById('mapa'); var mapOptions = { center: new google.maps.LatLng(40.413740, -3.6921), zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP } var mapa = new google.maps.Map(mapa, mapOptions) } google.maps.event.addDomListener(window, 'load', initialize); </script> </body> </html>También crearemos el archivo de estilos css con el ID mapa:
#mapa { width: 620px; height: 400px; border: #000000 solid 1px; margin-top: 10px; }El resultado al ejecutar en un navegador será el siguiente:
Cambiemos el tipo de mapa por un mapa Satélitte, cambiamos la línea de código siguiente:
mapTypeId: google.maps.MapTypeId.SATELLITEEl resultado al ejecutar en un navegador será el siguiente:
Vamos a añadir a continuación un formulario para introducir los datos y luego visualizar el mapa pero con la dirección.
Entre <body> y </body> añadiremos el siguiente código:
<body> <strong>Mapa según Dirección</strong> <!-- Datos a buscar --> <form action="" method="post"> <input type='text' name='direccion' placeholder='Dirección' /><br> <input type='text' name='ciudad' placeholder='Ciudad' /><br> <input type='text' name='provincia' placeholder='Provinvia' /><br> <input type='text' name='pais' placeholder='País' /><br> <input type='submit' value='Buscar' /> </form> <?php include("funciones.php"); ?> <?php if($_POST){ // Buscamos la latitud, longitud en base a la direccion calle y número, ciudad, país $localizar=$_POST['direccion'].", ".$_POST['ciudad'].", ".$_POST['provincia'].", ".$_POST['pais']; $datosmapa = geolocalizar($localizar); echo "<br><br><strong></stroing>Consulta: </strong>".$localizar; // Tomamos los datos que encontro la funcion if($datosmapa){ $latitud = $datosmapa[0]; $longitud = $datosmapa[1]; $localizacion = $datosmapa[2]; } } ?> <div id="mapa" ></div> <script type="text/javascript"> function init_map() { var myOptions = { zoom: 18, center: new google.maps.LatLng(<?php echo $latitud; ?>, <?php echo $longitud; ?>), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("mapa"), myOptions); marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(<?php echo $latitud; ?>, <?php echo $longitud; ?>) }); infowindow = new google.maps.InfoWindow({ content: "<?php echo $localizacion; ?>" }); google.maps.event.addListener(marker, "click", function () { infowindow.open(map, marker); }); infowindow.open(map, marker); } google.maps.event.addDomListener(window, 'load', init_map); </script> </body> </html>
Crearemos un archivo denominado funciones.php para el código de consulta a Google maps con php que nos devolverá los datos en formato Json (JavaScript Object Notation) que es un formato ligero para el intercambio de datos.
La función geolocalizar será la siguiente:
<?php function geolocalizar($direccion){ // urlencode codifica datos de texto modificando simbolos como acentos $direccion = urlencode($direccion); // envio la consulta a Google map api $url = "http://maps.google.com/maps/api/geocode/json?address={$direccion}"; // recibo la respuesta en formato Json $datosjson = file_get_contents($url); // decodificamos los datos Json $datosmapa = json_decode($datosjson, true); // si recibimos estado o status igual a OK, es porque se encontro la direccion if($datosmapa['status']='OK'){ // asignamos los datos $latitud = $datosmapa['results'][0]['geometry']['location']['lat']; $longitud = $datosmapa['results'][0]['geometry']['location']['lng']; $localizacion = $datosmapa['results'][0]['formatted_address']; // Guardamos los datos en una matriz $datosmapa = array(); array_push( $datosmapa, $latitud, $longitud, $localizacion ); return $datosmapa; } } ?>Realizaremos una consulta donde ubicaremos el Museo del Prado de Madrid en el mapa por ejemplo:
- Dirección: Paseo del Pado s/n
- Ciudad: Madrid
- Provincia: Madrid
- País: España
Realizaremos una consulta donde ubicaremos las oficinas de Google en París con los siguientes datos generaremos el mapa:
- Dirección: 8 Rue de Londres
- Ciudad: París
- Provincia: Isla de Francia
- País: Francia
Hemos visto como utilizar una mapa con el Google Map Api. Veremos como modificar los datos del icono y tambien como animarlo con un efecto rebote. Para ello utilizaremos los datos de ejemplo de latitud y longitud de la oficina en Madrid de Google que son los siguientes 40.4503252,-3.6929834.,
Creamos un archivo mapa.php
<!DOCTYPE html> <html> <head> <scriptsrc="http://maps.googleapis.com/maps/api/js"></script> <script> /* consulto los datos a google con la latitud y longitud */ var localizacion=new google.maps.LatLng(40.4503252,-3.6929834); /* función que configura e incializa el mapa */ function iniciar() { var mapa = { center:localizacion, zoom:18, mapTypeId:google.maps.MapTypeId.ROADMAP }; var mapa=new google.maps.Map(document.getElementById("mapa"),mapa); /* configura el icono puntero y le añado animación var configicono=new google.maps.Marker({ position:localizacion, animation:google.maps.Animation.BOUNCE }); configicono.setMap(mapa); /* en info añado la informacion nombre de cliente o empresa en html */ var info = new google.maps.InfoWindow({ content:"<strong>Google Madrid </strong><br> Teléfono: +34 917486400" }); info.open(mapa,configicono); } google.maps.event.addDomListener(window, 'load', iniciar); </script> </head> <body> <div id="mapa" style="width:500px;height:380px;"></div> </body> </html>
También podemos utilizar el servicio de Google Street View es un servicio de Google Maps y de Google Earth que proporciona vistas panorámicas a nivel de calle. Este servicio esta disponible desde el Api de Google Maps. Veamos un ejemplo de como utilizarlo para ver un mapa y su correspondiente vista con Google Street View.
Para ello creamos un archivo mapacalle.php, utilizaremos para este ejemplo las coordenadas de Diario EL País que son 40.43753,-3.623937 y copiamos el siguiente código:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #mapa { height: 100%; margin: 0; padding: 0; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script> function iniciar() { var localizar = new google.maps.LatLng(40.43753,-3.623937); var mapaconfig = { center: localizar, zoom: 18 }; var mapa = new google.maps.Map( document.getElementById('mapa'), mapaconfig); var vistaconfig = { position: localizar, pov: { heading: 20, pitch: 5 } }; var vistacalle = new google.maps.StreetViewPanorama(document.getElementById('vista'), vistaconfig); mapa.setStreetView(vistacalle); } google.maps.event.addDomListener(window, 'load', iniciar); </script> </head> <body> <div id="mapa" style="width: 50%; height: 100%;float:left"></div> <div id="vista" style="width: 50%; height: 100%;float:left"></div> </body> </html>
Tengamos en cuenta que no es exacta la búsqueda y podría mostrarnos el punto de visión desde el lado contrario de la calle, es decir posicionados con la vista contraria al lugar que queremos mostrar. Por lo tanto podemos girar la imagen o bien ajustar las coordenadas.
Se puede crear tanto aplicaciones web y móviles con html5, así podemos utilizar imágenes satelitales, street view, calcular distancias, ver indicaciones sobre cómo llegar a un luga. Podemos acceder a fotos o bien publicar comentarios.
Esta muy bueno, pero cuando cargo los datos de un lugar me carga el mapa por un segundo y luego se borra y dice error en la aplicación javascript. porque puede suceder esto?