Saltar al contenido

Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

Introducción

En este tutorial de Google Maps, utilizaremos el lenguaje de programación PHP para acceder a la información de cada marcador almacenada en una base de datos MySQL.

Creación de la base de datos y la tabla

En primer lugar, crearemos una base de datos en nuestro servidor y una tabla donde almacenar la información de cada uno de nuestros marcadores.  Podemos crear todos los campos que necesitemos, aunque como mínimo necesitaremos la latitud, longitud y el nombre del lugar. En nuestro caso también usaremos otros campos como la dirección y el tipo de lugar. La tabla que utilizaremos en este ejemplo tendrá la siguiente estructura:

CREATE TABLE IF NOT EXISTS `locales` (
 `idlocal` int(11) NOT NULL,
 `nombre` varchar(80) DEFAULT NULL,
 `lat` float DEFAULT NULL,
 `lng` float DEFAULT NULL,
 `descripcion` varchar(500) DEFAULT NULL,
 `direccion` varchar(80) DEFAULT NULL,
 `tipos_nombre` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 

Acceso a los datos mediante PHP

Para acceder a los datos almacenados abriremos una conexión mediante la función «mysqli_connect». Posteriormente, pasaremos como parámetros a la función «mysqli_query», los datos de la conexión y la consulta a la base de datos.

$con = mysqli_connect($host, $user, $pass, $db_name) or die("Error en la conexión");
            $query = "select * from locales";
            $resultado = mysqli_query($con,$query);

 

Creación del mapa

Para la creación del mapa utilizaremos JavaScript, de la misma manera que en tutoriales anteriores.

var bcn = new google.maps.LatLng(41.3797362,2.1730737);
var mapOptions = {
    center: bcn,
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'), mapOptions);

 

Creación de los marcadores e infoWindows

Para ello, combinaremos el código JavaScript y PHP.

Dentro de un bucle while extraeremos en cada iteración los resultados almacenados en un array asociativo («mysqli_fetch_assoc») que contendrá el resultset obtenido anteriormente y almacenado en la variable $resultado.

En cada iteración se crea un nuevo marcador con su infoWindow a partir de los datos de cada una de las filas obtenidas en la consulta a la base de datos ($data[‘nombre_de_la_columna’]).

<?php
  $i=1;
  while ($data = mysqli_fetch_assoc($resultado)) {
?>
<script type="text/javascript">
   var marker<?php echo $i;?> = new google.maps.Marker({
   position: new google.maps.LatLng(<?php echo $data['lat']; ?>, <?   php echo $data['lng']; ?>),
   map: map,
   title: <?php echo "'".$data['nombre']."'"; ?>,
   icon: 'img/icono.png',
});
 
   var contentString = "<h1><span class='glyphicon glyphicon-asterisk' aria-hidden='true'></span>&#160;<?php echo "".$data['nombre'].""; ?></h1><p><span class='glyphicon glyphicon-screenshot' aria-hidden='true'></span>&#160;<b>Dirección</b><br> <?php echo "".$data['direccion'].""; ?></p><p><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>&#160;<b>Descripción</b><br><?php echo "".$data['descripcion'].""; ?></p>"
 
    var infowindow<?php echo $i;?> = new google.maps.InfoWindow({
       content: contentString
    });
 
    google.maps.event.addListener(marker<?php echo $i;?>, 'click',  function() {
     infowindow<?php echo $i;?>.open(map,marker<?php echo $i;?>);
    });
</script>
<?php
   $i++;
   }
   mysqli_close($con);
?>

 

Todo junto:

<body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1>Mapa de locales de Barcelona</h1>
          <div style="text-align:center;"><a href="index.php" class="btn btn-info">Volver al buscador</a></div><br><br>
          <div id="mapa" style="width:100%;height:360px;"></div><br>
          <?php
            $con = mysqli_connect($host, $user, $pass, $db_name) or die("Error en la conexión.");
            $query = "select * from locales";
            $resultado = mysqli_query($con,$query);
            echo "<h2>Lista de locales</h2><br>";
          ?>
          <script type="text/javascript">
            var bcn = new google.maps.LatLng(41.3797362,2.1730737);
            var mapOptions = {
                center: bcn,
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
            map = new google.maps.Map(document.getElementById('mapa'), mapOptions);
          </script>
            <?php
              $i=1;
              while ($data = mysqli_fetch_assoc($resultado)) {
            ?>
            <script type="text/javascript">
              var marker<?php echo $i;?> = new google.maps.Marker({
                position: new google.maps.LatLng(<?php echo $data['lat']; ?>, <?php echo $data['lng']; ?>),
                map: map,
                title: <?php echo "'".$data['nombre']."'"; ?>,
                icon: 'img/icono.png',
              });
 
              var contentString = "<h1><span class='glyphicon glyphicon-asterisk' aria-hidden='true'></span>&#160;<?php echo "".$data['nombre'].""; ?></h1><p><span class='glyphicon glyphicon-screenshot' aria-hidden='true'></span>&#160;<b>Dirección</b><br> <?php echo "".$data['direccion'].""; ?></p><p><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>&#160;<b>Descripción</b><br><?php echo "".$data['descripcion'].""; ?></p>"
 
              var infowindow<?php echo $i;?> = new google.maps.InfoWindow({
                content: contentString
              });
 
              google.maps.event.addListener(marker<?php echo $i;?>, 'click', function() {
                infowindow<?php echo $i;?>.open(map,marker<?php echo $i;?>);
              });
            </script>
            <?php
                $i++;
              }
              mysqli_close($con);
            ?>
        </div>
      </div>
    </div>
  </body>

 


Comentarios

  1. Gracias! Para los que usen web2py el código queda tal que así:

    function initMap() {
    var myLatLng = {lat: 40.46366700000001, lng: -3.7492200000000366};
    var map = new google.maps.Map(document.getElementById(‘map’), {
    zoom: 5,
    center: myLatLng
    });
    {{

    associa = db.associacions.with_alias(«a»)
    poblacio = db.poblaciones.with_alias(«p»)
    rows= db(associa).select(associa.nom,poblacio.poblacion,poblacio.latitud,poblacio.longitud,left=[poblacio.on(poblacio.poblacion == associa.poblacio)])
    i=1
    for r in rows:
    }}

    var marker{{=i}} = new google.maps.Marker({
    position: new google.maps.LatLng(parseFloat({{=r.p.latitud}}), parseFloat({{=r.p.longitud}})),
    map: map,
    title: «{{=r.a.nom.replace(«\n»,»»)}}»,
    });

    {{

    i+=1
    pass
    }}
    }

  2. Buenos días, Rubén.
    Acabo de descubrir esta serie de notas sobre Google Maps y antes de leerlas quisiera consultarle si lo que necesito es posible y puede hacerse a través de lo que ud. explica:

    Dada una dirección, debe aparecer con un marcador en Google Maps, con un zoom tal que muestre un radio de 1000 metros como para saber en qué parte aproximada de la ciudad está.

    Sé que para eso podría usarse simplemente Google Maps, pero, a pedido de los usuarios, el mapa debe aparecer integrado en una página que hago donde habría otros datos sobre la zona (de eso ya me encargué, falta únicamente el mapa).

    Muchas gracias!!

  3. Hola Ruben, quisiera saber cómo se utiliza el plugin Shortcode Carousel. Ya lo he instalado, pero soy muy novato y no sé si hay que configurarlo en algún archivo de mi instalación de Omeka o si directamente puedo insertar en Simple Pages. Tendrás algún ejemplo para enviarme?
    Muchas gracias!
    Silverio

  4. Buenas noches!
    Estoy utilizando Leaflet + Ionic para crear una app donde me muestre la ubicación de mis usuarios y me gustaría guardar la info de los marcadores de mis usuarios (ubicación, Lat/Lng) en mi base de datos MySQL + PHP y que el script del mapa tome esa info para mostrar con marcadores la ubicación/desplazamiento de mis usuarios.

    Me podrían ayudar? Sugerencias!!!!

    Desde ya GRACIAS SDOS A TODOS!

  5. Hola Ruben, de antemano gracias por tu atencion. Estoy desarrollando una pagina web a pulmon ya que no soy experto y necesito que al ingresar una direccion en un campo input, me autocomplete con direcciones reales y al seleccionar una poder almacenar en una base de datos, el nombre del pais, la region, el barrio ,las coordenadas de la misma y una captura del mapa con la direccion seleccionada (con un zoom definido). Esto es posible? No encuentro en la web como hacerlo y vi tus tutoriales que son muy buenos y me atrevi a preguntarte. Gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Archivo

Categorías

Defective by design.org

Hardcore Hits Cancer

Últimos comentarios

BY-SA 4.0 — Pinakes, 2022. Desarrollado con WordPress.

Uso de cookies

Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de la política de cookies.

ACEPTAR
Aviso de cookies