Cargando

Ir a contenido


 


Google Maps API - Mostrar localización en mi web con PHP

Vereis los pasos para poder crear mapas con imágen de visualización mediante la API de Google Maps y el lenguaje PHP.


Escrito por el ago 13 2015 10:02 google googlemaps php


La Api de Google Maps nos permite hacer una búsqueda o localización con codificación geográfica de Google Maps con PHP y también utilizar algunas funciones programadas en JavaScript de Google Maps para mostrar los datos geolocalizados en un mapa que pondremos en nuestra web.

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.SATELLITE
El 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
Al buscar veremos el resultado en el mapa con un puntero rojo, que indica la localización de Museo del Prado.




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
Al buscar veremos el resultado en el mapa con un puntero rojo, que indica la localización de las oficinas de Google.




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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 13 2015 10:02
  •   Actualizado ago 13 2015 10:47
  •   Visitas 9K
  •   Nivel
    Profesional



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


andreserod
ago 22 2017 12:47

Muy buen aporte, sin embargo, me queda la duda de cómo podría coger los datos de latitud y longitud (automáticamente) y compararlos con los que tengo en la Base de Datos MySql, para poder medir la distancia de mi usuario, con mi cliente....

 

Agradecería mucho su ayuda en este respecto.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse