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> <?php echo "".$data['nombre'].""; ?></h1><p><span class='glyphicon glyphicon-screenshot' aria-hidden='true'></span> <b>Dirección</b><br> <?php echo "".$data['direccion'].""; ?></p><p><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span> <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> <?php echo "".$data['nombre'].""; ?></h1><p><span class='glyphicon glyphicon-screenshot' aria-hidden='true'></span> <b>Dirección</b><br> <?php echo "".$data['direccion'].""; ?></p><p><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span> <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>
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
}}
}