Cargar una ubicación desde la Base de Datos MySQL con PHP y Google Maps Javascript API

Demo Github
En alguna ocasión has deseado mostrar las ubicaciones que tienes almacenadas en una Base de Datos MySQL, ya sea por una aplicación que estas desarrollando en donde quieras mostrar varios puntos que son marcadores en el mapa de Google u otro tipo de proyecto, en este tutorial aprenderás a a realizar esta tarea, vamos con el tutorial.
Recuerdo una vez que implemente esta funcionalidad, el proyecto en si era para una cadena de restaurantes la cual contaba con cerca de 20 tiendas en el País y quedo muy bien, podían mostrar la ubicación de cada restaurante en el mapa de Google, en este caso solo vamos a listar las ubicaciones.
Por otro lado para crear y editar ubicaciones puedes utilizar el código de este tutorial, solo debes de añadir funciones adicionales con php en donde puedas enviar los datos a la Base de Datos, para capturar los datos puede usar algo como Google Places con una o varias cajas de texto en donde captures todos los datos y guardarlos en la Base de Datos.
Obtener una API de Google Maps
Puedes empezar creando un aplicación con Google Maps Javascript API, dirígete a la Galería de aplicaciones de Google Console e inicia sesión con tu cuenta de Google para poder crearla, si no vez la aplicación en la pantalla inicial, puedes usar el buscador de aplicaciones y escribir Maps JavaScript API una vez que te aparesca selecciónala
Ahora habilita la API, haciendo clic en el botón para Habilitarla, una vez que la habilites se cambiará el botón por otro nuevo que dice Administrar, dale clic
Luego ve a las credenciales de tu nueva aplicación que has creado y Copia el API KEY
Si deseas Proteger tu API de Google Maps para que otros usuarios no la puedan usar en sus proyectos, puedes ver el siguiente video, este video es para una versión anterior, pero te puede servir de referencia ya que las opciones son similares
El API Key que copiaste lo debes de pegar en la vista de tu proyecto, de la siguiente manera:
1 2 3 |
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=ACA-COLOCA-TU-API-KEY&callback=initMap"></script> |
Con esto ya podemos trabajar sin problemas con el servicio de Google Maps.
Desplegando Google Maps
Vamos a usar las funciones que Google Maps Developers nos brinda para poder levantar nuestro Mapa, estas funciones ya vienen predeterminadas listas para usarlas, salvo si deseas crear algo diferente tienes que escribir código adicional, según lo que desees hacer.
En la parte en donde creamos los marcadores y en la parte en donde creamos la ventana de información de los marcadores llamaremos un archivo PHP para cada uno, con estos archivos ejecutamos código de servidor con peticiones a la Base de Datos MySQL con las ubicaciones y sus datos como Latitud (lat), Longitud (lng), Dirección (direccion), etc.
1 2 3 4 5 6 7 8 9 10 11 |
// Crear múltiples marcadores desde la Base de Datos var marcadores = [ <?php include('php/marcadores.php'); ?> ]; // Creamos la ventana de información para cada Marcador var ventanaInfo = [ <?php include('php/info_marcadores.php'); ?> ]; |
A continuación todo el código Javascript para crear el mapa dinámico de Google con los Marcadores, colocaré comentarios explicando que tareas realizan las partes mas importante del código
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
function initMap() { var map; var bounds = new google.maps.LatLngBounds(); var mapOptions = { mapTypeId: 'roadmap' }; map = new google.maps.Map(document.getElementById('mapa'), { mapOptions }); map.setTilt(50); // Crear múltiples marcadores desde la Base de Datos var marcadores = [ <?php include('php/marcadores.php'); ?> ]; // Creamos la ventana de información para cada Marcador var ventanaInfo = [ <?php include('php/info_marcadores.php'); ?> ]; // Creamos la ventana de información con los marcadores var mostrarMarcadores = new google.maps.InfoWindow(), marcadores, i; // Colocamos los marcadores en el Mapa de Google for (i = 0; i < marcadores.length; i++) { var position = new google.maps.LatLng(marcadores[i][1], marcadores[i][2]); bounds.extend(position); marker = new google.maps.Marker({ position: position, map: map, title: marcadores[i][0] }); // Colocamos la ventana de información a cada Marcador del Mapa de Google google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { mostrarMarcadores.setContent(ventanaInfo[i][0]); mostrarMarcadores.open(map, marker); } })(marker, i)); // Centramos el Mapa de Google para que todos los marcadores se puedan ver map.fitBounds(bounds); } // Aplicamos el evento 'bounds_changed' que detecta cambios en la ventana del Mapa de Google, también le configramos un zoom de 14 var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { this.setZoom(14); google.maps.event.removeListener(boundsListener); }); } // Lanzamos la función 'initMap' para que muestre el Mapa con Los Marcadores y toda la configuración realizada google.maps.event.addDomListener(window, 'load', initMap); |
Listando las ubicaciones desde MySQL con PHP
Vamos a usar el Lenguaje de Programación de Servidor PHP para conectarnos a la Base de Datos MySQL, así listar las ubicaciones y enviarlas al Mapa.
Primero haremos una petición a la Base de Datos con las ubicaciones para crear los Marcadores. Creamos un archivo llamado marcadores.php y agregamos lo siguiente, en el código colocaré comentarios explicando que tareas realizan las partes mas importante del código
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php // Archivo de Conexión a la Base de Datos include('conexion.php'); // Listamos las direcciones con todos sus datos (lat, lng, dirección, etc.) $result = mysqli_query($con, "SELECT * FROM google_maps_php_mysql"); // Seleccionamos los datos para crear los marcadores en el Mapa de Google serian direccion, lat y lng while ($row = mysqli_fetch_array($result)) { echo '["' . $row['nombre'] . ', ' . $row['direccion'] . '", ' . $row['lat'] . ', ' . $row['lng'] . '],'; } ?> |
Ahora vamos a crear otro archivo llamado info_marcadores.php que mostrará información de dicha ubicación con la dirección cuando el visitante coloque el puntero del mouse en el marcador, en el código coloco un comentario explicando que tarea realiza el código
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php // Agregamos el nombre y dirección a la ventana de información de cada marcador, puedes agregar la información que desees, nosotros agregaremos 'nombre' y 'direccion' if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ ?> ['<div class="info_content">' + '<h3><?php echo $row['nombre']; ?></h3>' + '<p><?php echo $row['direccion']; ?></p>' + '</div>'], <?php } } ?> |
En una tabla HTML listaremos las ubicaciones que servirán como leyenda del Mapa
Creamos un archivo con el nombre app.php y agregamos lo siguiente, en el código colocaré comentarios explicando que tareas realizan las partes mas importante del código
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?php // Archivo de Conexión a la Base de Datos include('conexion.php'); // Listamos las direcciones con todos sus datos (lat, lng, dirección, etc.) $result = mysqli_query($con, "SELECT * FROM google_maps_php_mysql"); // Creamos una tabla para listar los datos echo "<div class='table-responsive'>"; echo "<table class='table'> <thead> <tr> <th scope='col'>Nombre</th> <th scope='col'>Dirección</th> <th scope='col'>Latitud</th> <th scope='col'>Longitud</th> <th scope='col'>País</th> </tr> </thead> <tbody>"; while ($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td scope='col'>" . $row['nombre'] . "</td>"; echo "<td scope='col'>" . preg_replace('/\\\\u([\da-fA-F]{4})/', '&#x\1;', $row['direccion']) . "</td>"; echo "<td scope='col'>" . $row['lat'] . "</td>"; echo "<td scope='col'>" . $row['lng'] . "</td>"; echo "<td scope='col'>" . $row['pais'] . "</td>"; echo "</tr>"; } echo "</tbody></table>"; echo "</div>"; mysqli_close($con); ?> |
Por ultimo creamos el archivo llamado conexion.php que nos servirá crear una conexión con la Base de Datos MySQL
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php // Nos conectamos a la Base de Datos MySQL $con = mysqli_connect("localhost", "usuario", "password", "basededatos"); // Verificamos la conexión a la Base de Datos MySQL if (mysqli_connect_errno()) { echo "Error al Conectar a la base de Datos: " . mysqli_connect_error(); } ?> |
Con eso ya tenemos la lógica necesaria para acceder a la Base de Datos MySQL con PHP que nos permitirá listar los datos en el Mapa de Google
Base de Datos
Para este tutorial vamos a crear una tabla en nuestra base de datos con el nombre de marcadores, puedes ponerle el nombre que desees, le añadimos 6 campos que son id, nombre, direccion, lat, lng y pais (A estos campos no les agregues acentos ni caracteres especiales, para evitar errores).
Los campos de nuestra tabla marcadores deben de tener el siguiente formato, como la siguiente imagen
A la tabla marcadores le insertaremos 6 ubicaciones, por ende mostraremos 6 Marcadores en el Mapa de Google
1 2 3 4 5 6 7 8 9 |
INSERT INTO `google_maps_php_mysql` (`id`, `nombre`, `direccion`, `lat`, `lng`, `pais`) VALUES (1, 'Dirección 1', 'Avenida Jos\\u00E9 Pardo 456, Miraflores', -12.119, -77.0352, 'Perú'), (2, 'Dirección 2', 'Avenida Arequipa 5095, Miraflores', -12.1165, -77.0311, 'Perú'), (3, 'Dirección 3', 'Av. Angamos 726, Surquillo', -12.1135, -77.0261, 'Perú'), (4, 'Dirección 4', 'Avenida 28 de Julio 1236, Miraflores', -12.1305, -77.0225, 'Perú'), (5, 'Dirección 5', 'Avenida Mariscal C\\u00E1ceres 326, Miraflores', -12.1197, -77.0232, 'Perú'), (6, 'Dirección 6', 'Calle Porta 236, Miraflores', -12.1245, -77.0329, 'Perú'); |
Si tienes algún error al insertar las ubicaciones en la tabla marcadores, en el repositorio GitHub de este tutorial colocaremos la base de datos para que la puedas importar sin problemas.
Tras haber insertado las 6 ubicaciones, la tabla marcadores debe verse de la siguiente manera
Configuración de la Vista
Como ejecutaré código Javascript y también código PHP, crearemos un archivo llamado index.php para que nuestra página pueda leer el código PHP que usamos para hacer peticiones a la Base de Datos MySQL
Llamamos a la tabla que sirve como Leyenda de los marcadores que están el Mapa
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="row mt-3"> <div class="col-md-12"> <h2 class="h2s">Direcciónes en la Base de Datos MySQL</h2> <!-- Archivo PHP con la lógica para mostrar una tabla con las ubicaciones --> <?php include('php/app.php'); ?> </div> </div> |
Ahora hay que crear el contenedor para el mapa, sencillamente agregamos una capa o div
1 2 3 4 |
<!-- Contenedor del Mapa de Google --> <div id="mapa"></div> |
Le aplicamos un alto al Mapa
1 2 3 4 5 6 7 |
<style type="text/css"> #mapa { height: 50vh; } </style> |
Es es todo, si tienes alguna duda, puedes clonar el repositorio GitHub que esta al inicio de este tutorial junto con la Demo.
Nota
- El código Javascript debe ir en la parte inferior antes de cerrar las etiquetas </html> y </body>, por favor mira el archivo index.php del repositorio GitHub.
- Los pasos y opciones mencionados en este tutorial pueden cambiar en un futuro, esto no depende de nosotros si no de los Desarrolladores que dan soporte a Google Maps Javascript API, PHP y MySQL.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.
Buenas tardes, Muy bueno el codigo coMpañero, solo un dato, en el archivo info_Marcadores.php falto el query a la base de datos $result = mysqli_query($con, “SELECT * FROM google_maps_php_mysql”); ya que no iMpriMe los datos de noMbre direccion, saludos
Hola, te estas confundiendo amigo, ese query se hace en el archivo marcadores.php y en el archivo info_marcadores.php se llama a las direcciones. Para ver las direcciones en el mapa debes colocar el puntero del mouse encima de un marcador del mapa y esperar unos segundos y aparecerá la dirección.
Hola, muy buen post, gracias!!
Tengo un problema, al momento de agregar php por medio de la variable marcadores dentro del script, me marca error (uso sublime text como editor y me arroja el ultimo corchete en color rosa) espero puedas ayudarme, comprendo que se crea un array para tomar las cordenadas desde la db, ya cree la clase marcadores.php y nada, he estado intentando de diferentes formas pensando que tal vez la sintaxis no esta bien pero sigo sin allar el modo, te agradeceria mucho si me ayudas
Verifica si la llave de cierre al final tiene su llave de apertura, ya que eso te puede estar dando errores en los corchetes.
Me avisas como te fue.
Muy bueno todo. Cuantos días dura la prueba gratis que menciona en la pagina y cuanto hay que pagar?
Si tu cuenta no tiene configurada la facturación siempre te va aparecer que la prueba se ha agotado. Puedes usar la API Google Maps de JavaScript activando la facturación y Google te dará $200 mensuales para que los uses gratis y si sobrepasa, comenzaran a descontarte el monto requerido.
Entonces los días gratis que te da Google son la cantidad de peticiones que llegue a $200.
Google esta constantemente cambiando sus planes y precios, para ver los precios actuales puedes revisar su documentación en donde podrás ver como te consumira los $200 gratis que te da por mes.
https://developers.google.com/maps/documentation/javascript/usage-and-billing
Saludos
Buenas, muy buena explicación, pero tengo un problema, me aparece lo de la imagen y ya lo tengo todo tal cual, la api la creé yo como dicen aquí, y aún así me sigue votando este error, espero pronta respuesta, muchas gracias.
Debes de activar la facturación en tu cuenta de Google Cloud Platform.
Bienvenido a la comunidad, a que te refieres? He probado la Demo y si carga la información de cada ubicación, solo debes colocar el puntero del mouse en la que desees ver.
https://raw.githubusercontent.com/collectivecloudperu/google_maps_php_mysql/master/demo03062021.jpg
Los infobox son datos adicionales que se pueden agregar con JavaScript, no hay problema con ello.
Buenos días.
Estimado muy buen aporte. Solo tengo un inconveniente al momento de cargar el mapa no se muestra(como se muestra en la imagen). solo aparece la pantalla en blanco. Cave recalcar que esto solo me sucede cuando subo la paginas a un servidor gratis, ya que de forma local (en el localhost de mi pc), funciona sin ningún inconveniente con la API que ya genere.
Agradecido de antemano por su ayuda, gracias.
Hola Carlos bienvenido a la comunidad.
La demo de este tutorial, esta publicada en un servidor de pago y funciona sin problemas, revisa en tu consola del navegador que error te tira. Puedes presionar la tecla f12 en windows para ver la consola, por ejemplo en Google Chrome.
Hola Gracias por el por aporte, tengo un problema al hacer clic en el icono de la ubicación no crea la ventana informativa.
Hoa Johan bienvenido a la comunidad, no se hace clic, solo debes poner el puntero del mouse en el icono de ubicación y automáticamente te va mostrar la información de la ubicación correspondiente.
Muy buienh aporte amigo felicidades y una duda realice las pruebas y todo fucnfione muy bien solo que tengo un inconveniente al agregar la api de maps me posisiona en la india y yo me encuentro de cd de mexico sabes a que se debe ese detalle
Hola Carlos y bienvenido a la comunidad !
Recuerda que el proyecto centra las ubicacións cargadas desde la base de datos. Sencillamente tienes que implementar geolocalización para que detecte tu ubicación.