Artículo

Google maps con sidebar en codeigniter

Codeigniter, Programación Web.

codeigniter1

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

About these ads

29 Comments

  • Avatar para israel965

    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

    • Avatar para israel965

      No, la verdad es que no lo he utilizado.

  • Avatar para israel965

    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

    • Avatar para israel965

      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.

  • Avatar para israel965

    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!

  • Avatar para israel965

    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.

    • Avatar para israel965

      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!

  • Avatar para israel965

    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”

    • Avatar para israel965

      Un saludo y gracias por comentar

  • Avatar para israel965

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

    • Avatar para israel965

      ¿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.

  • Avatar para israel965

    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? 😀

    • Avatar para israel965

      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.

  • Avatar para israel965

    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…

  • Avatar para israel965

    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í???

  • Avatar para israel965

    Queria saber que puerto utiliza este servicio para abrirlo por firewall

    • Avatar para israel965

      Hola,

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

  • Avatar para israel965

    tengo un probelma me marca un error

    An Error Was Encountered

    Unable to load the requested file: welcome_message.php

    • Avatar para israel965

      Con qué url tratas de acceder?

  • Avatar para israel965

    Buenas noches, tengo un problema. No me aparecen los markers de las coordenadas que tenga en mi tabla. Debido a que podría ocurrir ese error?

    • Avatar para israel965

      Hola,

      Revisa la consola del navegador, probablemente tengas un error javascript.

      Saludos.

  • Avatar para israel965

    Hola estimado…
    …muy bien explicado el uso de esta libreria!!!
    y ya he hecho uso de ella exitosamente!!!
    Por otro lado no he logrado, actualizar los marker de forma dinamica!!!
    Me explico…
    …un marker tiene una posicion inicial {lat: 0, lng: 0}
    y luego de un lapso de tiempo tendria {lat: 0, lng: 1}
    y posteriormente tendria algo asi {lat: 0, lng:2}

    La idea es que en el mapa se vaya actualizando la posicion del marker…
    …de forma automatica, he tratado de hacerlo con ajax
    pero no le pego a la piñata aun!!!
    Quedo atendo a comentarios…!!!

    • Avatar para israel965

      Hola,

      Lo que se puede hacer con la librería lo puedes ver aquí, si no está en la demo probablemente la librería no está preparada, y lo tendrás que hacer con javascript.

      Si ya tienes el código en jsfiddle lo puedes reutilizar, la instancia del mapa ya se ha generado, sólo debes trabajar sobre lo que necesites.

      Saludos.

  • Avatar para israel965

    Hola, no me funciona el onclick. Fui a la consola del navegador para ver el error y me sale que el marker no está definido. Copié el código tal y como estaba.

    • Avatar para israel965

      He descargado el ejemplo y funciona perfectamente, sólo debes descargar, configurar base de datos y listo.

  • Avatar para israel965

    Que código tendría que agregar para que todos los markers estén ocultos y al hacer click en un campo de la lista del sidebar, aparezca su respectivo marker?? Por favor, te encargo esa solución. Me sería de mucha ayuda

Dejar un comentario

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


Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para suscribirte al blog y recibir notificaciones de nuevas entradas.

About these ads
Sígueme en Twitter
Conecta con Google +
Acceso premium



A %d blogueros les gusta esto: