Mapas

Hoy por fin acabamos el curso para crear tu propio mashup con Google Maps que empezamos hace unas semanas. En las entregas anteriores mostramos como crear la base de datos MySQL y los PHPs necesarios para acceder a la base de datos y al API de Google Maps para mostrar los mapas. En esta última entrega veremos como mostrar los datos guardados previamente en la base de datos y los retoques finales de la aplicación.

Paso 5: Visualización de datos

En este paso vamos a crear una página PHP que nos sirva de index para nuestro sitio, que tiene que poseer la siguiente funcionalidad:

  • Mostrar el mapa de Google Maps
  • Mostrar los restaurantes ya posicionados (acceder a la Base de Datos y consultarlos).
  • Mostrar una leyenda para entender los datos
  • Permitir introducir nuevos datos en el mapa simplemente pulsando sobre una posición del mapa
  • Añadir el buscador de Google Maps para poder posicionarnos en le mapa por dirección

Nada mas empezar creamos varias variables que utilizaremos en el resto del fichero php:

Variables

Las variables $mWidth y $mHeight determinarán el tamaño de la ventana de Google Maps, la variable $mapZoom el zoom inicial del mapa y la variable $centerpoint el punto en el que queremos que se empiece a mostrar el mapa. La variable $default_shadow es la imagen que utilizamos como sombra de los puntos marcados en el mapa.
Lo siguiente que hacemos es incluir el fichero config.php que hicimos en el paso 3, que nos permite conectarnos a la base de datos.

include config
A continuación, también incluimos el fichero introducir.php, para poder introducir datos desde la misma página.

include introducir

Ahora ya comienza el código de verdad. Para mostrar los puntos en el mapa, lo primero es obtenerlos de la base de datos, eso lo hacemos con una consulta SQL :

Select SQL

En esta consulta lo que hacemos es obtener todos los restaurantes ordenados por el campo restaurante_ID y guardar el resultado en la variable $result. En la siguiente línea lo que hacemos es validar la consulta, si la variable $result no vale nada mostramos un error indicando que no hemos podido obtener los datos, y hacemos un exit del script PHP para que no siga ejecutándose.

En el caso que todo vaya bien y obtengamos valores en la variable $result, seguimos con el script:

Obtener valores

Como se puede ver, lo que hacemos con el while es ir recorriendo los resultados obtenidos y guardándolos en la matriz $coord_array[x][y], para utilizarlos posteriormente. Puedes notar que en la parte de la URL también hacemos una comprobación para dejarla en un formato correcto y evitar problemas con urls mal insertadas en el sistema.

El siguiente paso consiste en simplemente añadir el script de mapas de google, un script JavaScript que nos proporciona Google:

Js Google

Para obtener tu clave (recuerda que es personal), tienes que registrarte en Google para poder utilizar Google Maps. Recuerda que es importante no sobrepasar las 50.000 impresiones al día (máximo impuesto por Google). Si tienes más impresiones diarias, tu servicio se verá suspendido y deberás contactar con la gente de Google.

Seguimos con el código. El siguiente paso es crear el código Javascript con los datos obtenidos desde la base de datos. Para ello hacemos un include de la pagina process.php que veremos en el siguiente paso:

include process

Paso 6: Creación de JavaScript de Google Maps

En este paso vamos a crear el código Javascript necesario por Google maps para posicionar los puntos en el mapa. Este código lo vamos a guardar en el fichero process.php, que hemos llamado desde el fichero index.php.

No voy a explicar el código completo de este fichero porque es bastante repetitivo, podéis ver todo el contenido bajándoos el Zip con toda la aplicación completa. Vamos a comentar la parte más interesante, la creación dinámica de los puntos del mapa:

Javascript dinamico
Como podéis ver en la imagen (sólo he puesto el principio del for, mirad bien desde la línea 107 hasta la 127), recorremos la matriz $coord_array[x][y] y vamos obteniendo los datos para crear el fichero javascript, de esta forma podemos pintar todos los puntos en el mapa fácilmente.
Y con esto ya tendríais vuestro primer mashup con Google Maps. Si tenéis cualquier comentario o duda dejad un comentario a este post y la intentaré resolver.

Enlace | Código completo del curso

Enlace | Documentación oficial de Google Maps API

Enlace | Curso Parte 1

Enlace | Curso Parte 2