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

Tutoriales | | 👤 Crear un Post, Eventos Devs, Foro
Tiempo de lectura: 7 minuto(s)

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 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

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.

Subscribirse
Notificar a
guest

15 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
suomynonA
suomynonA
2 años atrás

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

Omar Soto
Omar Soto
2 años atrás

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

muestra.png
joaquin
joaquin
2 años atrás

Muy bueno todo. Cuantos días dura la prueba gratis que menciona en la pagina y cuanto hay que pagar?

Sebastián
Sebastián
2 años atrás

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.

mapa.png
Carlos
Carlos
1 año atrás

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.

Captura.JPG
johan
johan
1 año atrás

Hola Gracias por el por aporte, tengo un problema al hacer clic en el icono de la ubicación no crea la ventana informativa.

Carlos
Carlos
6 meses atrás

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