Google Maps te proporciona una vÃa sencilla para marcar una ubicación en el mapa y embeberlo todo en una página web. Un marcador revela una ubicación en el mapa y una infoWindow (o ventana de información) muestra contenido en un popup sobre el mapa. Si añadimos uno de estos infoWindows sobre un marcador ayudarás al usuario a identificar la ubicación de forma más precisa mediante mucha más información.
Puedes embeber un mapa de Google Maps con múltiples marcadores y ventanas de información mediante la API de Javascript de Google Maps v3. En este caso, la latitud y la longitud de las ubicaciones las especificaremos de forma estática en el objeto de Google Maps. Pero si la latitud y la longitud se almacenan en una base de datos, deben asignarse dinámicamente en el propio objeto de Google Maps. En este tutorial, te mostraré cómo agregar múltiples marcadores con ventanas de información en un mapa de Google Maps dinámicamente mediante PHP y MySQL.
Obtener una key para la API
Para este tutorial necesitaremos autenticarnos en la API de Google Maps. En la llamada a la API tendremos que incluir la key como un parámetro para que la API nos reconozca. Por lo que, antes de embeber el mapa en tu página, crea una API key en Google Developer Console.
Una vez tengas tu API key, cópiala porque más tarde la vamos a utilizar.
Crea la tabla de la BD
Para almacenar las ubicaciones necesitaremos crear una tabla en la base de datos. El siguiente SQL crea una tabla llamada locations con ciertos campos básicos (latitude, longitude, location name e info).
CREATE TABLE `locations` ( `id` int(11) NOT NULL AUTO_INCREMENT, `latitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL, `longitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL, `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL, `info` varchar(255) COLLATE utf8_unicode_ci NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Configuración de la base de datos
Utilizaremos el fichero dbconfig.php para conectarnos a la base de datos. Para ello tendremos que definir los credenciales de la BD.
<?php
// Database configuration
$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName = "noprog";
// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
Obtener la información de las ubicaciones de la base de datos
Extraeremos la latitud y la longitud de las múltiples ubicaciones de la base de datos utilizando PHP y MySQL.
- La primera consultará la realizaremos para extraer la información de las ubicaciones (ubicación, latitud y longitud)
- La segunda consulta para el contenido de las inforWindows.
<?php
// Include the database configuration file
require_once 'dbConfig.php';
// Fetch the marker info from the database
$result = $db->query("SELECT * FROM locations");
// Fetch the info-window data from the database
$result2 = $db->query("SELECT * FROM locations");
?>
Añadir múltiples marcadores con InfoWindows
Carga la API de Google Maps y acuérdate de integrar la key que hemos copiado antes como un parámetro en la llamada.
<script src="https://maps.googleapis.com/maps/api/js?key=TU-KEY"></script>
El siguiente código Javascript añade múltiples marcadores con ventanas de información a un mapa de Google.
- La función initMap() es una función de Javascript que gestiona la funcionalidad de crear el mapa
- Inicializamos el objeto de Google Maps para adjuntar el mapa a un elemento HTML
- Extraemos la latitud y la longitud de la base de datos y geremos el array de posiciones para los múltiples marcadores (markers)
- Extraemos la información de las ubicaciones y generamos el array del contenido de las ventanas (infoWindowContent)
- Añadimos múltiples marcadores con ubicaciones dinámicas a Google Maps
- Añadimos el contenido a las ventanas de información
- Definimos el nivel de zoom del mapa
- Llamamos a la función initMap()
<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the web page
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
map.setTilt(50);
// Multiple markers location, latitude, and longitude
var markers = [
<?php if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
echo '["'.$row['name'].'", '.$row['latitude'].', '.$row['longitude'].'],';
}
}
?>
];
// Info window content
var infoWindowContent = [
<?php if($result2->num_rows > 0){
while($row = $result2->fetch_assoc()){ ?>
['<div class="info_content">' +
'<h3><?php echo $row['name']; ?></h3>' +
'<p><?php echo $row['info']; ?></p>' + '</div>'],
<?php }
}
?>
];
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Place each marker on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Add info window to marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Center the map to fit all markers on the screen
map.fitBounds(bounds);
}
// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
Embeber el mapa de Google
Define un elemento HTML para mostrar el mapa de Google con múltiples marcadores y ventanas de información en la página web. Debes especificar el ID del elemento (mapCanvas) en el objeto Google Map.
<div id="mapCanvas"></div>
Código CSS
El siguiente código CSS define el tamaño del contenedor del mapa
#mapCanvas {
width: 100%;
height: 650px;
}
Â