PHP
PHP

En este tutorial vamos a crear una aplicación con google maps con php y mysql, en cuestión será un localizador de tiendas, como ya sabemos, esta api nos proporciona código de ejemplo con el fin de que nosotros lo mejoremos y consigamos adaptar a nuestras necesidades, pues eso hemos hecho.

Para que nos hagamos una idea, veamos que podremos hacer con nuestro buscador:

Podremos buscar comercios por nombre de ciudad o por nombre de ciudad y tipo de comercio estableciendo el radio sobre el cuál queremos obtener respuesta.

Tendremos un formulario en el cuál haremos uso del autocompletar de google maps junto con un mapa del mismo, así conforme el usuario vaya escribiendo el control le irá dando pistas con el fin de que consiga encontrar su posición, cuando pulse sobre la dirección deseada google maps nos colocará en esa ubicación en el mapa.

En el mismo formulario, al escoger la dirección deseada, a través de campos ocultos conseguiremos las coordenadas de esa posición en el mapa para poder guardarlas en la base de datos. También tendremos un select para escoger el tipo de establecimiento, un campo de texto para el nombre y un textarea para añadir una descripción.
La idea es que esta información será almacenada en nuestra base de datos para posteriormente mostrarla en un infowindow de google maps como veremos.

Dicho esto creo que es buen momento para ver algunas imágenes y hacernos una idea del proyecto finalizado, veamos.

Localizador de tiendas con php(PDO), mysql y google mapsLocalizador de tiendas con php(PDO), mysql y google maps    Localizador de tiendas con php(PDO), mysql y google maps


Localizador de tiendas con php(PDO), mysql y google maps
Localizador de tiendas con php(PDO), mysql y google maps

Localizador de tiendas con php(PDO), mysql y google maps
Localizador de tiendas con php(PDO), mysql y google maps
Localizador de tiendas con php(PDO), mysql y google maps
Localizador de tiendas con php(PDO), mysql y google maps

Antes de continuar, aquí tienes una serie de tutoriales sobre google maps que quizá te interesen.

Ahora creo que ya tenemos claro el final, así que si te interesa, acompáñame hasta el final :D.

Estructura de directorios y archivos necesarios para completar el proyecto:

A nuestro proyecto lo llamaremos gmapsphp, dentro deberemos crear tres carpeta, una llamada clases, aquí guardaremos las clases gmaps.class.php y conexion.class.php, no hace falta decir para que serán.
La carpeta css y la carpeta js, una vez creadas, podemos descargar los siguientes archivos, primero los css.

Descargar archivos css

Y ahora los js del framework css foundation que nos creará unos selects impresionantes sin ningún esfuerzo.

Descargar archivos js

Cada uno los colocamos en sus respectivas carpetas.

La base de datos

Para nuestro proyecto trabajaremos con mysql para guardar y obtener las tiendas a través de la base de datos, así que debemos crearla.

 
Y ahora la tabla lugares, que será donde guardemos los comercios.
 

La vista principal

Creamos un nuevo archivo llamado index.php en la raíz del proyecto y añadimos el siguiente código, el cuál generara la vista para poder escoger el radio, tipo de comercio etc.

Como podemos ver, en la cabecera llamamos a varios archivos css y js, el resto es html para generar la vista, la primera parte para que esto funcione es crear el archivo gmaps.js en la carpeta js, así que podemos crearlo y añadir el siguiente código.

Aquí simplemente creamos el mapa con las configuraciones creadas y los añadimos a la vista index.php, tenemos funciones que se encargan de solicitar datos, otra de parsear el xml, pintar el marker y el infowindow en el mapa etc, y todo está explicado en el código, simplemente debemos fijarnos en cada sección y tratar de entenderlo.

Si ahora nos dirigimos al debemos ver el mapa con el formulario y el sidebar sin ningún problema, lo único que si intentamos hacer búsquedas no funcionará, ésto es por dos motivos, el primero es que no tenemos información en la base de datos, y el segundo que los archivos que le tienen que devolver información no han sido creados, así que creo que es un buen momento para crear la clase conexion y gmaps.

La clase conexion.class.php

Creamos un archivo en la carpeta clases llamado conexion.class.php y dentro colocamos el siguiente código con el cuál podremos establecer una conexión con nuestra base de datos.

La clase gmaps.class.php

Por problemas, no se pueden colocar temporalmente los símbolos porcentaje en el código, así que en la línea 46 colocar $tipo_comercio = ‘porcentaje’.$tipo_comercio.’porcentaje’;, disculpar las molestias, en breve estará solucionado.

Ahora ya tenemos las clases para establecer la conexión a nuestra base de datos y para obtener e insertar datos, simplemente nos queda crear los archivos que la llaman, para obtener datos y mostrarlos en el mapa el archivo al que hacemos la petición es dataGmaps.php, así que sólo debemos crearlo en la raíz de la aplicación(esto no es recomendable, pero es para evitar más carpetas) y dentro colocamos el siguiente código.

Bien bien, ahora si que podemos hacer peticiones a la base de datos, el problema es que no tenemos resultados para mostrar, así que ahora debemos crear el archivo add_store.php en la raíz del proyecto y dentro añadir el siguiente código, el cuál nos generará un formulario con google maps, pero en este caso haciendo uso del autocompletado que nos ofrece y un mapa donde reflejar la posición escogida, veamos.

Si ahora accedemos a la siguiente url podremos ver el formulario, pero de forma incompleta, ésto es porque necesitamos escribir más js, en este caso para crear otro mapa y la funcionalidad del autocompletado, así que creamos un nuevo archivo en la carpeta js llamado add_store.js y dentro colocamos el siguiente código.

Ahora si que podemos acceder al formulario y lo debemos ver perfectamente, el problema es el mismo que antes, que no funciona porque falta el archivo que se encarga de procesarlo, así que creamos un nuevo archivo en la raíz del proyecto llamado save_store.php y dentro colocamos el siguiente código.

Como vemos, simplemente recogemos los datos del formulario y los enviamos al método save_store de nuestra clase gmaps, lo único que deberíais validar que los campos no vengan vacíos.