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>