Curso: Crea tu propio mashup con Google Maps (?ltima Parte)
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:
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.
A continuación, también incluimos el fichero introducir.php, para poder introducir datos desde la misma página.
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 :
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:
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:
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:
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:
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
&url=http%3A%2F%2Fwww.techtear.com%2F2007%2F04%2F29%2Fcurso-crea-tu-propio-mashup-con-google-maps-ultima-parte){kind=link}
18 ComentariosComentar
Muchas gracias, Rafael, de verdad. Me pongo a hacerlo ya mismo.
hola rafael, gracias y ayuda!
es q no logro hacer que rule.
me he bajado el codigo y no me sale el mapa. Creo q el problema está en el process.php o en el pdmarker.js , porque cuando reemplazo el script del el mapa si me sale.
porfa, a ver si me ayudas que ya estoy algo loca !!
he implementado el gmap para buscador pero ahora quiero trabajarlo con bd
desde ya gracias por tu maestria ! =)
Hola gracias por el curso, pero sabes tengo un problema y me gustaria saber si me pudieras ayudar un poco.
Mira el mapa y todo me funciona bien, pero al hacer clic y querer agregar otro punto en el mapa me sale el error que no se pueden ingresar los datos a la base de datos, que podra ser? lo reviso y lo vuelvo a ver y no se que.
De ante masnos muchas gracias
Hola excelente pero la verdad me pide una base de datos donde la obtengo gracias
Muchas gracias por este fantástico tutorial de google maps. Ya he creado una aplicación gracias a él.
Un saludo
HOla io me preguntaba si se podia cargar digamos tu base de datos de los restaurantes en otro mashup como el wikimapia para no solo tener la referencia textualsi no tambien la marca de toda la propiedad
Hola rafael, muchas gracias, muy bueno el articulo.
Quisiera saber si existe la posibilidad y de que manera aplicar esto a algun mapa GIS de alguna ciudad que no esta en google, si es por medio de capas o si se puede.
Gracias
Hola que tal, tengo el mismo problema que Chris, no me despliega el mapa, me sale un cuadro vacio, que es lo que procede??
Gracias rafael por el aporte, ya lo utilizo el codigo pero tengo una duda bien grande en versiones inferiores a internet explorer 7 me sale constante de cade sin terminar y no se donde ubicar eso para corregir.
Agredecere tu respuesta o algunos de el foro que ya tropezaron con este problema para que me den una pauta.
Gracias
Saludos
Muy bueno y muy util el articulo.
Tengo una pequeña duda. si meto miles de restaurantes por toda españay pretenderia mostrarlos todos en una vista de toda españa, cada uno con su puntito, seria viable??
Supongo que tendria un coste alto (o no?), pero como de alto???
Por ultimo, se puede cambiar el puntero y poner por ejemplo una cerveza si quiero mostrar cervecerias???
Un saludo
Hola Rafael, he visto la informacion que esta en tu portal y me interesa mucho porque estoy estudiando la manera de realizar para mi proyecto de tesis una aplicacion para la promocion del turismo basada con la herramientas que ofrece Google Maps, el objetivo es enriquecer la informacion sobre el mapa de que ofrece Google, como puedo hacer? es necesario tener un sitio web? me puedes orientar o por favor nos podriamos poner en contacto via e-mail para explicarte ie modo mas amplio lo que se desea Gracias...
Esta muy bien si. Pero en ningun momento hablas de lo más importante que es la librería pdmarker.js.
Hola Rafael, esta muy bueno, pero no me funciona... no se que he hecho mal pero no puedo crear nuevos puntitos, ni sale error... solo puedo ver el mapa... http://www.dxturia.com/indax.php
Gracias
Como hago para cambiar el puntero del mouse en JS cuando este pasa por encima de un mapa de Gmaps???
Hola muy bueno tu curso, quisiera obtener ayuda poque yo hice algo parecido siguiendo el tutorial que google mismo nos ofrece pero no puedo visualizar el mapa se genera el xml pero no puedo ver el mapa sera que me puedes ayudar gracias
Hola, me parece un estupendo artículo y de gran ayuda!
Pero tengo un problema y es que no se me visualiza el mapa. He puesto mi clave de google y todo lo que dices en el tutorial pero no hay manera.
Espero que me puedas ayudar.
Muchas gracias de antemano!
No funciona
Hola,
Muy bueno el tutorial. Me gustaría hacerte una pregunta. Yo necesito una aplicación para mi Web en la cual tengo un mapa de Google, y voy actualizando este mapa con las coordenadas de los usuarios que deseen mostrar su posición. Es decir, tengo mi base de datos en la cual voy guardando la posición del usuario que lo desee y desde allí la leo y la marco en el mapa ¿Para hacer esto podría hacerlo con tu tutorial o debería cambiar alguna cosa?
Un saludo y gracias.