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

Tutoriales

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:

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.

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

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

Ahora vamos a crear otro archivo llamado info_marcadores.php que mostrará información de dicha ubicación con el nombre y la dirección cuando el visitante haga clic en el marcador, en el código coloco un comentario explicando que tarea realiza el código

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

Por ultimo creamos el archivo llamado conexion.php que nos servirá crear una conexión  con la Base de Datos MySQL

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

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

Ahora hay que crear el contenedor para el mapa, sencillamente agregamos una capa o div

Le aplicamos un alto al Mapa

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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required