- Informática

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>

 

Sobre mí Rubén Alcaraz

Bibliotecario-documentalista e informático en continua iteración que habla de web y tecnología. There's no place like 127.0.0.1
Lee todas las entradas de Rubén Alcaraz

7 thoughts on “Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

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

    1. Perdón, olvidaba decir que no dispongo de coordenadas, solo una base de datos con los nombres de las calles y rangos numéricos para validar que la dirección solicitada exista.

  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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

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