Article

Google maps con sidebar en codeigniter

1x1.trans

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

18 Comments

  • Hola Israel:
    Quisiera saber si en sus proyectos ha integrado google calendar en codeigniter, si es asi seria tan amable de publicar un tutorial sobre esto?Lo que sucede es que me gustaria tener sincronizada la informacion de google calendar en la web….Si tiene informacion sobre eso se lo agradeceria en demasìa…..Espero sus comentarios.
    Saludos

    • No, la verdad es que no lo he utilizado.

  • Buenas,
    lo que pasa es que estaba probando el GoogleMaps y no me ha funcionado, lo único que le cambie fueron las coordenadas de la base de datos, pero esto no es el problema ya que la saque desde GoogleMaps. En si el problema esta en que no muestra nada cuando se abre la pagina, se queda la pantalla en gris pero no muestra ningun erro, tampoco ningún mapa ni nada, no se que hacer. Por favor ayuda

    • Hola, no sé que debe estar pasando, prueba a mirar la consola desde chrome a ver si te da algún tipo de error, de todos modos dejo los archivos para descargar el proyecto completo, pero es lo mismo que hay en el tutorial, espero que lo puedas solucionar.

  • Hola amigo, muy agradecido con tus tutoriales, tengo una sola pregunta, y de ante mano te digo que gracias a este post estoy diseñando una aplicacion grande, te explico por encima, consiste en ubicar como marker con su infowindow unas 1500 instituciones educativas(escuelas) de un estado de mi pais(venezuela) el punto está en que no se como obtener las coordenadas numericas que ingresas a la base de datos X,Y para de esta forma poder mostrarlas en el mapa, te agradeceria enormemente me ayudaras con eso.
    Gracias!

  • No te entendí bien, que es lo que necesitas, poder pulsar en el mapa para recoger las coordenadas, o las coordenadas de las instituciones.
    Como consejo te digo que este sistema de google maps para codeigniter también permite, en vez de pasarle coordenadas la opción de pasarle, país o estado y ciudad o localidad.
    Creo que te puede ir perfecto para tu caso, en vez de tener que obtener las coordenadas.

    En lugar de:

    prueba:

    Debes cambiar algunas cosas, pero creo que puedes conseguir lo que necesitas por ese camino, un saludo.

    • Disculpa por no darme a entender bien, en tu ejemplo el primer marker señala a la ciudad de madrid, en la base de datos las coordenadas son:
      pos_x -1.7305078506469727 y pos_y: 42.355308532714844

      Como hacer para sacar estas coordenadas tipo “42.355308532714844” de cada lugar que quiera graficar en mi mapa

      Gracias!

  • Bueno te escribo desde Argentina, y quiero decirte que esta muy bien explicado, muchas gracias por compartir tus conocimientos.

    “Una vela no pierde su luz, por compartir su luz con otra”

    • Un saludo y gracias por comentar

  • una consulta, como controlas errores en el caso de que la ubicacion no exista o este mal ingresada ?

    • ¿Fácil no?, simplemente debes saber cuál es la latitud y longitud más altas y las más bajas, con eso haces un if y compruebas si los datos están dentro de los límites.
      De todas formas, lo mejor para introducir los datos de mapas en la base de datos es hacerlo mediante otro mapa de google maps, de esta forma al pulsar el usuario en el mapa obtenemos la latitud y longitud y sabemos que siempre serán datos correctos.

  • Saludos estimado, me sirvio mucho conocer esta facilidad de usar Codeigniter con GoogleMaps… pero quisiera saber como se podria hacer con comboxDinamicos.. osea teniendo un comboBox Pais y que la seleccionar un Pais me carge las Provincias de ese País y una vez seleccione la Provincia de ese País me marque un infowindows en el GoogleMaps…me deje explicar verdad? :D

    • Hola,

      En el tutorial hay un enlace a la doc de la librería, con eso tiene que ser suficiente para que puedas hacer lo que necesitas, no es muy complicado, saludos.

  • Saludos otra vez…he estado pendiente a tu respuesta… podrias decirme como poder hacer eso de la libreria???..soy novato en googleMaps y mis conocimientos en Codeigniter son pininos…

  • Estimado estoy tratando de juntar los select dinamicos que hiciste con codeigniter con este tutorial..pero no me carga cuando elijo el segundo select….  porfavor dame una mano que estoy apunto de presentar un proyecto y aún… no puedo terminarlo…te paso el codigo??? o los posteo aquí???

  • Queria saber que puerto utiliza este servicio para abrirlo por firewall

    • Hola,

      Los puertos que debes utilizar serán los que tengas asignados tanto a php como a mysql, por defecto 80 y 3306, saludos.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


tres × = 27

Cursos
Cursos del blog
Visitas desde el 29/11/2014
  • 90Impresiones de este artículo:
  • 65170Total de impresiones:
  • 1003Impresiones hoy:
  • 40730Total de visitas:
  • 668Visitantes hoy:
  • 1072Visitantes ayer:
  • 2Visitantes conectados:
Servicio de hosting de gran calidad
Accede desde tu dispositivo
Acceso premium