Google maps con sidebar en codeigniter

Tutoriales de Codeigniter

En este tutorial vamos a ver como hacer una aplicación utilizando Google maps con sidebar en codeigniter.

La librería de google maps con codeigniter es muy sencilla gracias a Steve Marks (Biostall.com), en éste ejemplo crearemos un mapa con varios markers y un sidebar a la derecha.

La idea es que cuando se pulse sobre cualquier elemento del sidebar, el mapa nos sitúe encima de ese marker y nos abra su infowindow(ventana de información de los markers en googlemaps).

Veremos como con pocas líneas de código y de forma sencilla podremos hacer todo esto, dejo una demo para ver el resultado final.

Ver la demo

Aplicación Google maps con sidebar en codeigniter

Nos vamos a la web de codeIgniter y nos descargamos la versión que hay disponible, la guardamos y la extraemos en nuestro directorio raíz, en mi caso C:\xampp\htdocs, una vez tengamos ya la carpeta con los archivos debemos cambiarle el nombre, le podemos poner gmaps_ci, sugiero que coloquen el mismo así será más sencillo seguir el tutorial.

Dejo las librerías para que la podáis descargar.

Librería googlemaps para codeigniter

Estos archivos los debéis colocar dentro de aplication/libraries.

Y dejo también el pdf de Steve Marks sobre la librería googlemaps en codeigniter para que podáis hacer uso plenamente de todas sus opciones.

Google_Maps_V3_API_Documentation

La base de datos

El archivo .htaccess

Ahora ya podemos acceder al proyecto desde aquí, sin el htaccess sería http://localhost/gmaps_ci/index.php.

El archivo database.php

Ahora debemos dirigirnos a nuestro archivo database.php que está en la carpeta config y modificar el código para que quede así, siempre dependiendo de nuestros datos de acceso a la base de datos.

El archivo autoload.php

Ahora nos dirigimos al archivo autoload.php que está dentro de la carpeta config y en la línea 55 debemos modificar el código por éste.

De esta forma cargamos automáticamente la base de datos y la librería de googlemaps para codeigniter, y en la línea 67 modificamos por este otro.

Con el helper url tendremos disponible las urls amigables.

El archivo config.php

Ahora vamos a nuestra carpeta config y abrimos el archivo config.php, en la línea 17 colocaremos este código.

El controlador mapa

Creamos un archivo en la carpeta controllers llamado mapa.php y dentro colocamos el siguiente código.

Como podemos ver simplemente cargamos el modelo que crearemos a continuación mapa_model y en la función index pasamos a crear el mapa y los markers correspondientes con sus posiciones, el código está explicado dentro del mismo que creo que es la mejor forma de entenderlo, pasemos a crear el modelo que es muy sencillo.

El modelo mapa_model

Creamos un archivo llamado mapa_model.php y lo colocamos en la carpeta models, dentro colocamos el siguiente código.

Simplemente cogemos los datos de la tabla mapa y los devolvemos al controlador, ahora ya los tenemos disponibles, finalmente crearemos la vista.

La vista mapa_view

Creamos un archivo llamado mapa_view.php y lo guardamos en la carpeta views, dentro colocamos el siguiente código.

Aquí finalmente mostramos toda la información que hemos creado, como podemos ver tenemos la función javascript datos_marker a la que le pasamos la latitud, la longitud y el id del marker, que hace que al pulsar en cualquier elemento del sidebar nos coloque en ese punto y nos muestre el infowindow de ese marker, muy útil la verdad.

Con la línea $map[‘js’] llamamos a googlemaps para poder hacer uso de los mapas de google en su última versión.

Con la línea $map[‘html’] creamos el mapa con toda la información que hemos creado en el controlador, así de fácil.

Y finalmente recorremos el array datos del controlador para rellenar nuestro sidebar, y le asignamos en el evento onclick nuestra función datos_marker de la siguiente forma:

Y con eso terminamos esta breve explicación sobre como utilizar google maps en codeigniter de forma asombrosamente sencilla gracias a Steve Marks (Biostall.com).

Visitad su página que la verdad que tiene cosas realmente útiles y es un genio, espero que os sirva y hasta la próxima, un saludo.

Descargar proyecto googlemaps_ci

35 Comentarios

  1. raul
    • israel965
  2. sebastian
    • israel965
  3. israel965
    • William Peñaloza
      • israel965
    • israel965
    • israel965
  4. carlos
    • israel965
  5. carlos
  6. carlos
  7. Pablo Hidalgo
    • israel965
  8. juan moreno
    • israel965
    • israel965
    • israel965
    • israel965
  9. Rainer
    • israel965
    • israel965
  10. Daduis orozco gamarra
  11. jose

Añade un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
Desarrolla una tienda en tiempo real con Angular 5 y FirestoreAcceder ahora
+ +