CodeIgniter Google Maps V3 API Library

July 2nd, 2010 - Posted by Steve Marks to Javascript / jQuery, PHP, Web Development.

CodeIgniter Library - Google Maps API

Looking for a Laravel implementation of this library? You’re in luck. Click here.

In early May 2010 I wrote a Google Maps API library for CodeIgniter. This used Version 2 of the Google API and was pretty limited.

Well, I’ve been working tirelessly over the past weeks to get a new version wrote that uses Version 3 of the API instead and I am very pleased to announce that it is now avalaible for download.

The library enables you to create a map and overlay multiple markers, polylines, polygons, rectangles, ground overlays and/or circles, all of which are fully customisable. The library also supports showing directions between two points, including the ability to show the textual directions alongside the map too, and marker clustering. The first stages of integration with the Google Places API are available for use too.

To get a copy, read the documentation or to view a demo simply follow the links below:

Download Library (Last updated 1st February 2013)

View GitHub Repository

View Documentation PDF (185kb)

View Demonstrations

The demonstrations above are basic examples of what can be achieved by using the library. I recommend you read the documentation to view a full list of configurable options.

An Introduction to using the Library (Watch on YouTube)

Library Features

  • Change the maps appearance including zoom, central position, size and control positioning.
  • Add multiple markers, ground overlays, circles, rectangles, polylines and polygons. Add them all on the same map, each with a whole host of configurable options to change the appearance and how they function.
  • Add event handlers to all items on the map. This means you can perform a custom action when, for example, a marker is dragged, or the map is clicked.
  • Too many markers? Enable marker clustering to speed up and clean up your map.
  • Geocode lookups. You don’t need to know the exact lat/long co-ordinates to center the map or add a marker. You can use a building name, an address, an area, in fact any textual location will work.
  • Javascript minimisation. Include the Jsmin.php file and minify the JS output by the library.
  • Either output the Javascript to the page or write it to a separate .js file.
  • Drawing Manager library integration
  • Add traffic, bicycling and Panoramio overlays.
  • Add directions by specifying a start and end point, as well as having the option to output the textual directions to a separate element on the page.
  • Caching of Geocode requests. Speed up the map by caching any geocode lookups made.
  • Integration with the Google Places API.
  • Support for HTML5 geocoding meaning you can center the map on a user’s location.
  • Support for use within an application using HTTPS
  • Allows you to integrate with your Google Adsense account and overlay ads on top of the map.
  • Support for creating multiple maps on the same page
  • Support for KML and GeoRSS Layers

Upcoming Features

  • Viewport Marker Management
  • Extensions to the directions integration
  • Extensions to the Google Places API integration
  • Possible integration with the Elevation API

If you have any questions, spot a bug, have any feature suggestions or would like to leave feedback please leave a comment below or drop me a line.

There is a lot of functionality to be added to this library soon so keep checking back for any progress or follow me on GitHub.

This entry was posted on Friday, July 2nd, 2010 at 10:45 pm by +Steve Marks and is filed under Javascript / jQuery, PHP, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (196)
  1. Sophannareth says:

    Very, very good job… :D

  2. Ed says:

    Nice Work!!

  3. Helge says:

    Thank you so much! Have spent days googleing, and finnaly you made what i am looking for!

  4. Ahmed says:

    Nice work

  5. Thank you for making this? Where do I leave a donation?

  6. @John – I believe this actually due to a long-standing problem which I need to get round to fixing. In summary, because of the ü and ß characters, I believe you to encode them somehow, to UTF-8 I believe. If I get a chance later today I’ll take a look and put a fix in. Hope that puts you on right path though (for now). I’ll send you a direct email once I’ve resolved this :)

  7. John says:

    Hi @Steve Marks,

    I ask you some time ago about one problem I had and all was perfect. Now I`ve another problem. I can’t make the markers work with address basen in Germany. I change for example Lüneburg for Luneburg and Haagestraße by Haagestrasse and its ok.

    Is there something I missed? Maybe something to do with region code or something else? Thanks!

  8. Mehdi Jalal says:

    It is really great thanks alot.

  9. @Moru – If I’m honest, I haven’t even looked into integrating it yet. If you want to have a go I’d obviously give you credit. Let me know if any questions. Cheers

  10. Moru says:

    Any idea how far into the future Viewport Marker Management is? Should I look into doing it myself and contribute code or are you 90% done already? :-)

  11. @Puge – Are you getting any JS errors? Does it work if you import the KML into the normal Google Maps following these instructions:

    http://www.askdavetaylor.com/how_to_import_xml_kml_data_file_google_maps/

    If yes and you believe the problem is with the library, can you send me the KML file so I can investigate further?

    Thanks

  12. Puge says:

    No points are being displayed when I tried using a kml file that was built using a KML builder.

  13. @Matthew – A worthy idea. I have just added the ability to add a class name to the map div which will now allow for the scenario you mention:

    https://github.com/BIOSTALL/CodeIgniter-Google-Maps-V3-API-Library/commit/986f35a27eab2fdd63cc00d8d9197f7129c3d07c

    Thanks for the suggestion.

  14. Matthew says:

    I think you should try and make the map responsive to suite like bootstrap three. class img-responsive. The image is not responsive. it would be a good addition to add I think.

  15. Shyam J says:

    good work …keep it up guyzz…helped me alot

  16. @francois W – My advice would be to echo the output from the geocoding request in the get_lat_long_from_address() function. For example:

    $data = file_get_contents($data_location);
    echo $data;

  17. An other problem for me :
    $this->googlemaps->get_lat_long_from_address($search);
    is working on my local server but it doesn’t work on my webhoster server.
    Have you an idea for this problem ?

  18. @Mike – Setting the ‘map_height’ parameter to ’100%’ when initialising the map does work. I’ve just given it a go here. Note however, the map will go to 100% height of the parent container and therefore, the maps parent container will need a height set first. This is more to do with CSS than the library itself. Here’s a link which might assist:

    http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

    Hope that helps! :)

  19. I solved my problem using
    $this->googlemaps->get_lat_long_from_address($search);
    in order to have coord before to set marker and not use the adress directly.

  20. Mike says:

    How can I set map_height to 100% ?

  21. Hi,
    Congretulations for this library.
    I have a problem when using Jsmin with some adresses (20%) with this error :
    JSMinException: Unterminated string literal

    Can you help me ?

  22. @carlos – Please see the comment from user ‘MK’, about 5 comments below this one made on 13th Aug.

  23. carlos says:

    how can I show more than 1 map in the same view?
    I do the 2 requests using the LIB and print the both HTML and JS, but crash the page. When I show only one map, work’s perfect.

  24. @Chris – This is going to depend on the HTML around the map_canvas I believe. Do you have a URL where I can see the full site in action? Or can you put your code up on http://www.codesend.com?

    I’ll then be more than happy to take a look and see what I can do :)

  25. Chris says:

    Thanks for the library it’s great :)

    Once minor issue thats bothering me is that I can set map_width to 100% and it works fine, but when i set map_height to 100% it goes off-screen. (firefox)

    When looking at the html under the div id “map_canvas”

    If I change the position to absolute it works fine and i can see the map.

    I realise I can fix the above by just using pixels instead of % but thought i should ask just in case i have set something wrong

  26. Mike says:

    WOW Nice work!!! I feel like I owe you for this!

  27. Farhan says:

    Great I can find lat/long by this
    $this->googlemaps->get_lat_long_from_address($search);

    Thanks

  28. Farhan says:

    Hi,
    How can I get lat/long say if I search for USA.
    Regards

  29. MK says:

    Replying to my own post. To display multiple maps do the following…

    In Googlemaps.php replace line 1104 from this

    function create_map()

    to this

    function create_map($value)

    And in the first line add this

    $this->map_div_id = $this->map_div_id.$value;

    In the controller pass a variable to the create_map function, like this

    create_map($map_variable)

    thats it.

  30. MK says:

    Is there a way to load a multiple maps in same view with the present codebase, its mentioned that its a upcoming feature, but i like to know if there is a way to display multiple maps in a one view.

    To be more clear on what i exactly need to do, I like to display different company branch’s in same prefecture in multiple maps,

  31. Fahmi says:

    Awesome very thank you, god bless u bro !!!!!

  32. Eric says:

    Hello everyone, I was wondering if someone could point me in the way of how to do this.

    I am looking to have a drop down refine search to so 25, 50, and 100 mile radius of the users current location and or by a city search.

    I would also like to have something in the way of refining search by using the “type” in my database table.

    Here is an image from https://developers.google.com/maps/articles/phpsqlsearch_v3#createmap page that is something similar to what I am looking for.

    https://gmaps-samples-v3.googlecode.com/svn/trunk/articles/phpsqlsearch/phpsqlsearch_map.png

    Thank you,

    Eric

  33. Adam says:

    Still my favourite CI Library. Absolutely brilliant.

  34. Thanks a lot.It is very helpful and helped me a lot in my project.

  35. Love this library, I’ve used it 4 times with Codeigniter. I would like to make the selfish suggestion of a Laravel 4 version – Biostall is to on it to have not considered this yet ;-)

  36. Khim says:

    Thanks a lot. It is very useful and good CI library. It helped me a lot on my project.

  37. Benjamin says:

    Thank you, this is a great library.
    -i’d love to see the Weather Layer added sometime.

  38. Gonçalo Sá says:

    Nevermind, the iDevice problem! You must enable geolocation services for all browsers on iPad/iPhone for it to work.

    Thank you for this awesome library! :D

  39. Robert says:

    Great! Thanks for your work and for sharing that library.

  40. Thank you so much thanks to your library, I handled all gmaps api in a day.

  41. @Bart – Are you able to provide the code that you’re using at the moment so I can help you?

  42. Bart says:

    The infowindow doesn’t seem to work for me.

  43. @Steve Marks

    Steve,

    First, thanks SO MUCH for this library. You literally saved me a few hours of work programming a map for a customer.

    Second, thanks SO MUCH for that commit that allows IDs to be put on the markers. It’s awesome!

  44. @Israel – I’ve just put a tweak live to the library that allows you to now specify a custom id for a marker. The commit can be found here:

    https://github.com/BIOSTALL/CodeIgniter-Google-Maps-V3-API-Library/commit/3780e729a760599ddd889c71acee57f567cc4b71

    Simply pass in a unique ‘id’ parameter when adding the marker and the marker will be created with the name ‘marker_your_id’.

  45. Israel says:

    Hello, one question. I need change suffix from markers, example: marker_0 instead be marker_my_id from database, it’s possible?
    I want to make a menu that clicking on links opens the corresponding infowindow, but I need to know which marker belongs.
    Thank you.