Curso: Crea tu propio mashup con Google Maps (Parte 1)
- Imprimir
- Enviar por email
- Publicado por: Rafael Piñero
Hace una semana estuve hablando de las ventajas que proporcionaba la creación de Mashups. Para el que no lo recuerde, un mashup consiste en una aplicación web que utiliza recursos de mas de una fuente para crear un servicio completo.
También comentaba que la mayoría de Mashups actuales utilizaban el API de Google Maps. Pues bien, en este post voy a detallaros cuales son los pasos básicos para crear vuestro propio mashup, poniendo como ejemplo un Mashup que hice hace tiempo en mi web, utilizando el API de Google Maps y la idea de situar a los restaurantes cercanos a mi centro de trabajo. Si queréis ver el resultado completo (que es lo que obtendréis al final del curso), podéis verlo en la dirección http://www.mardito.com/mapas .
Para empezar, voy a explicaros un poco que es lo que vamos a necesitar:
- Conocer el API de Google Maps. No os preocupéis, os explicaré cuales son las funciones más importantes.
- Conocimientos de Bases de Datos. Nuestra aplicación web se nutrirá de una base de datos que crearemos en MySQL, el gestor de base de datos gratuito más utilizado (que no el más potente, pero esto ya es tema de un post futuro ;-) ).
- Conocimientos de PHP. Es el lenguaje que he utilizado por ser muy sencillo desarrollar aplicaciones utilizándolo. Podríais utilizar cualquier otro lenguaje web con acceso a base de datos como asp, jsp...
- Conocimientos de HTML, CSS y algo de diseño gráfico si queréis darle una apariencia chula a vuestra aplicación.
- Un servidor que os permita alojar tanto la Base de Datos como los ficheros de la aplicación (en nuestro caso MySQL y PHP).
- Ganas de programar (no os asustéis, no es mucho) y sobretodo de aprender ;-) .
Empecemos la faena, el primer es ver un poco la arquitectura de nuestra aplicación, para ello no hay nada mejor que un gráfico explicativo:
Podemos ver 3 "mundos" o entornos principales:
- Nuestra Aplicación Web, que se ejecuta en nuestro servidor y que realiza consultas contra los servidores de Google.
- El API de Google Maps, que se ejecuta en los servidores de Google y que nos devuelve la información que le pedimos.
- El navegador de usuario, que accede a nuestra aplicación web desde nuestra página.
Paso 1: Definición de la aplicación
El primer paso es tener claro qué queremos hacer. ¿Qué queremos situar en el mapa? Esto, a priori puede parecer innecesario definirlo, ya que siempre vamos a situar cosas en los mapas, pero no es así, debemos tenerlo muy claro desde el principio porque los datos que queramos mostrar hay que guardarlos previamente en la base de datos.
Por ello, antes de comenzar, definiremos si queremos mostrar sobre el mapa bares, gimnasios, restaurantes, colegios o lo que queramos. Esto es importante porque en función de lo que queramos mostrar sobre el mapa, también querremos mostrar alguna información relacionada con el elemento marcado. Por ejemplo, si mostramos restaurantes, querremos mostrar el precio del menú, el tipo de cocina (española, argentina, mejicana, comida rápida...), el teléfono y alguna valoración, por ejemplo.
Una vez tengamos estos datos claros, pasamos al paso 2, la creación de la Base de Datos.
Paso 2: La Base de Datos
Una vez tenemos bien claro que es lo que queremos mostrar en nuestros mapas, simplemente tenemos que mapear los elementos a la Base de datos. Voy a describir los elementos que he mapeado en el ejemplo (tu puedes cambiar los que creas necesario menos los que marco como obligatorios).
Los campos utilizados son:
- restaurante_ID. Identificador único del restaurante, es un código interno de la aplicación. Es de tipo Autoincrement para que siempre tenga un valor diferente. Obligatorio.
- restaurante_long. Guardaremos la coordenada de longitud del restaurante necesaria para posicionarlo con Google Maps. Obligatorio.
- restaurante_lat. Guardaremos la coordenada de latitud del restaurante necesaria para posicionarlo con Google Maps. Obligatorio.
- restaurante _nombre. El nombre del restaurante. Opcional.
- restaurante_coment. Comentarios al restaurante. Opcional.
- restaurante_marcado. Tipo de marcador que utilizaremos sobre Google Maps. Podemos usar varios tipos de marcadores para posicionar los elementos, así que usaremos un color distinto para cada tipo de restaurante. Se podría obtener en cada consulta a través del campo restaurante_cocina, pero lo incluimos como campo aparte por si decidimos más adelante usar un marcador único por restaurante con su logo (por ejemplo). Opcional.
- restaurante_cocina. El tipo de cocina del restaurante (asiática, española, mejicana, argentina...). Opcional.
- restaurante_direcc. La dirección física del restaurante. Opcional.
- restaurante_url. La web del restaurante (si tiene). Opcional.
- restaurante_precio. El precio del menú diario. Opcional.
- restaurante_ip. La IP desde la que se añadió el restaurante. Opcional.
- restaurante_mes. El mes en el que se añadió el restaurante. Opcional.
- restaurante_dia. El día en el que se añadió el restaurante. Opcional.
- restaurante_anyo. El año en el que se añadió el restaurante. Opcional.
- restaurante_hora. La hora en el que se añadió el restaurante. Opcional.
- restaurante_valoracion. La valoración (en numero del 0 al 10) del restaurante. Opcional.
NOTA: Los campos restaurante_mes, restaurante_dia, restaurante_anyo y restaurante_hora podrían haberse agrupado en un único campo de tipo TIMESTAMP pero se ha separado para hacer más comprensible el modelo y trabajar más facilmente con las fechas en la parte de PHP.
Aquí tienes el código SQL necesario:
CREATE TABLE `restaurantes` (
`restaurante_ID` mediumint(3) NOT NULL auto_increment,
`restaurante_long` varchar(30) NOT NULL default '0',
`restaurante_lat` varchar(30) NOT NULL default '0',
`restaurante_nombre` varchar(50) NOT NULL default '',
`restaurante_coment` text NOT NULL,
`restaurante_marcador` char(2) NOT NULL default '',
`restaurante_cocina` varchar(50) NOT NULL default '',
`restaurante_direcc` varchar(50) NOT NULL default '',
`restaurante_url` varchar(50) NOT NULL default '',
`restaurante_precio` varchar(10) NOT NULL default '',
`restaurante_ip` varchar(15) NOT NULL default '',
`restaurante_month` smallint(2) NOT NULL default '0',
`restaurante_day` smallint(2) NOT NULL default '0',
`restaurante_year` smallint(2) NOT NULL default '0',
`restaurante_time` varchar(15) NOT NULL default '',
`restaurante_valoracion` char(2) NOT NULL default '0',
PRIMARY KEY (`restaurante_ID`)
) TYPE=MyISAM AUTO_INCREMENT=1 ;
Con esto ya tendremos la base de datos creada. En la próxima parte del curso veremos como crear los PHPs necesarios para acceder a la base de datos y al API de Google Maps para mostrar los mapas. Pero eso ya será la semana que viene, ¡ hasta entonces no dejes de visitarnos !
24 ComentariosComentar
Buena. Yo tambien hice lo mismo, pero con imagen satelital de mi ciudad, y usuarios registrados pueden agregar sus marcas y categorizarlas en Estaciones de Servicio, Insituciones Religiosas, Municipales, Educativas, Comisarias, Negocios, Supermercados y esas cosas. El problema es que no hay maps de Buenos Aires, Argentina, asi que tengo que usar la imagen satelital.
Crees que podrias hacer un curso de como añadir layers custom? Asi puedo hacer mis propios mapas a escala y en lugar de tenerlo con imagenes satelitales lo hago con mapa o mixto. Lo intente pero nunca pude entender el codigo del API y como dividir las tiles de los mapas segun coordenadas y eso...
Buenas Pablo,
Primero acabaré este curso y a continuación tengo pensado uno de Bases de Datos... pero podría seguir con lo que me cuentas...
¡ Sigue visitándonos que a lo mejor te llevas una sorpresa !
Saludos, Rafa.
Ante todo, enhorabuena por la página.
Te quería hacer una consulta. He visto muchos mashups y todos vienen a tener las mismas funcionalidades, que consisten en la "geolocalización" de puntos y demás. Estoy haciendo uno para mi empresa pero necesito una nueva funcionalidad, pero no sé si será posible implementarla: la idea es poder mostrar rutas entre dos marcadores, por ejemplo, entre dos hoteles, tal como lo hace Google Maps con la opción "como llegar".
Es posible hacerlo???
Muchas gracias de antemano
Jose
Muy interesante, espero que continúe pronto el curso que somos muchos los impacientes. Saludos y ánimo.
[...] Hoy continuamos con el curso para crear tu propio mashup con Google Maps que empezamos hace un par de semanas (esta segunda parte se ha demorado mas de lo que hubiese querido, pero prometo que la tercera y última entrega estará en menos de 5 días). En la entrega anterior, explicamos el concepto, que queríamos obtener y comenzamos a crear nuestra aplicación, comenzando por la base de datos en MySQL. En esta segunda entrega, veremos como crear los PHPs necesarios para acceder a la base de datos y al API de Google Maps para mostrar los mapas. Así que vamos a entrar en faena. [...]
[...] 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. [...]
Mas que un comentario mi intencion es poder guardar un mapa de google maps en mi pc para poder trabajar luego sin conexion.
Gracias
disculpa, mi estimado ya no publicaste uno de Bases de Datos, como habias mencionado. grax es que ando haciendo algo para la esc, y me ah sido de gran ayuda todo. grax nuevamente.
[...] Check it out! While looking through the blogosphere we stumbled on an interesting post today.Here’s a quick excerptBlog Magazine de Tecnología, Internet, Hardware, Software, Posicionamiento, Desarrollo y mucho más! [...]
Muy útil tu curso. Gracias Rafael por proporcionar información necesaria.
Estimado amigo autor, como es que google maps cuando consulto unas distancia entre dos puntos en USA me hace un trazo de distancia en color morado de la trayectoria junto con el tiempo estimado de recorrido pero en otras partes del mundo no lo hace. Ejemplo en Costa Rica
La imagen con la estructura de la tabla de Restaurantes con que programa lo has hecho? Gracias.
Buenas
Mil gracias por el tutorial, muy bien relatado, documentado y explicado. Lo he seguido paso a paso y ya estoy implementando un mashup propio usando como base el tuyo.
Tengo una duda respecto a la inclusión de una barra lateral con los puntos introducidos, no consigo lograrlo no sé si Rafa habrás podido darle una vuelta al tema este, si alguien lograra algo parecido estaría agradecido de saberlo javikarni -(arroba)- gmail.com
De nuevo muchas gracias
Un saludo
[...] Un ejemplo básico para la creación de un mashup de mapas de Google puedes revisarlo en techtear [...]
No podia ejecutar el codigo, tiraba error. Resulta que no es con ese tipo de comillas lo que encierra al 0 :
??0?, sino que es '0'
Saludos! :)
Reitero y cambio mi opinion... NO FUE UN ERROR DEL ESCRITOR :) en el ejemplo que di, el template de la pagina cambia automaticamente las comillas derechas, pero bueno ESAS COMILLAS que se ven que rodean al 0 no son, son las derechas (una sola de cada lado) :) nose si sacando las mismas tambien funcionan :) bueno espero haberle resuelto la vida a alguien
excelente muy buena idea y darle un gran uso a la web de googlemaps
Hola muy interesante tu curso, estoy realizando lo mismo pero no con otro ejemplo que encontré propiamente en la pagina oficial de google, pero no puedo visualizar el mapa se genera el xml pero nada que se muestra el mapa ya he hecho de todo porfavor necesito ayuda
[...] TechTear :: T_T » Curso: Crea tu propio mashup con Google Maps (Parte 1) [...]
[...] TechTear :: T_T » Curso: Crea tu propio mashup con Google Maps (Parte 1) [...]
script de base de datos corregida
CREATE TABLE `restaurantes` (
`restaurante_ID` mediumint(3) NOT NULL auto_increment,
`restaurante_long` varchar(30) NOT NULL default '0',
`restaurante_lat` varchar(30) NOT NULL default '0',
`restaurante_nombre` varchar(50) NOT NULL default '',
`restaurante_coment` text NOT NULL,
`restaurante_marcador` char(2) NOT NULL default '',
`restaurante_cocina` varchar(50) NOT NULL default '',
`restaurante_direcc` varchar(50) NOT NULL default '',
`restaurante_url` varchar(50) NOT NULL default '',
`restaurante_precio` varchar(10) NOT NULL default '',
`restaurante_ip` varchar(15) NOT NULL default '',
`restaurante_month` smallint(2) NOT NULL default '0',
`restaurante_day` smallint(2) NOT NULL default '0',
`restaurante_year` smallint(2) NOT NULL default '0',
`restaurante_time` varchar(15) NOT NULL default '',
`restaurante_valoracion` char(2) NOT NULL default '0',
PRIMARY KEY (`restaurante_ID`)
) TYPE=MyISAM AUTO_INCREMENT=1 ;
Me tira el siguiente error la bbdd...
Error
consulta SQL:
CREATE TABLE `restaurantes` (
`restaurante_ID` mediumint( 3 ) NOT NULL AUTO_INCREMENT ,
`restaurante_long` varchar( 30 ) NOT NULL default '0',
`restaurante_lat` varchar( 30 ) NOT NULL default '0',
`restaurante_nombre` varchar( 50 ) NOT NULL default ", `restaurante_coment` text NOT NULL, `restaurante_marcador` char(2) NOT NULL default ",
`restaurante_cocina` varchar( 50 ) NOT NULL default ", `restaurante_direcc` varchar(50) NOT NULL default ",
`restaurante_url` varchar( 50 ) NOT NULL default ", `restaurante_precio` varchar(10) NOT NULL default ",
`restaurante_ip` varchar( 15 ) NOT NULL default ", `restaurante_month` smallint(2) NOT NULL default '0', `restaurante_day` smallint(2) NOT NULL default '0', `restaurante_year` smallint(2) NOT NULL default '0', `restaurante_time` varchar(15) NOT NULL default ",
`restaurante_valoracion` char( 2 ) NOT NULL default '0',
PRIMARY KEY ( `restaurante_ID` )
) TYPE = MYISAM AUTO_INCREMENT =1;
MySQL ha dicho: Documentación
#1067 - Invalid default value for 'restaurante_nombre'
la SQL corregida GRACIAAASSSS!
CREATE TABLE `restaurantes` (
`restaurante_ID` mediumint(3) NOT NULL auto_increment,
`restaurante_long` varchar(30) NOT NULL default '0',
`restaurante_lat` varchar(30) NOT NULL default '0',
`restaurante_nombre` varchar(50) NOT NULL,
`restaurante_coment` text NOT NULL,
`restaurante_marcador` char(2) NOT NULL,
`restaurante_cocina` char(2) NOT NULL,
`restaurante_direcc` varchar(50) NOT NULL,
`restaurante_url` varchar(50) NOT NULL,
`restaurante_precio` varchar(50) NOT NULL,
`restaurante_ip` varchar(15) NOT NULL,
`restaurante_month` smallint(2) NOT NULL,
`restaurante_day` smallint(2) NOT NULL,
`restaurante_year` smallint(2) NOT NULL,
`restaurante_time` varchar(15) NOT NULL,
`restaurante_valoracion` char(2) NOT NULL,
PRIMARY KEY (`restaurante_ID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Hola puedes hacer que en la base de tados se coloque iconos y se muestren en el mapa en ves de los icinos de google maps, que cada dirección muestre iconos diferentes