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.

Fear not, we won't publish this

Comments (210)
  1. Ralph says:

    Hi Steve,

    Great job! Thanks for the library.
    I’m also getting a grey screen. I have a valid address as well. Any ideas what may be causing this?nn1

  2. Should be able to. Try adding something like this to the map config settings:

    $config['styles'] = [[
    'definition' => [
    'featureType' => "poi",
    'elementType' => "labels",
    'stylers' => [
    [ 'visibility' => "off" ]

  3. Ty says:

    Cool, great stuff.
    Can you disable POI’s with the library aswell?

  4. @sufyan – Thanks for your kind words. Can I assume from your comment that the issue you are having is that when there is only one marker it is zoomed all the way in? If yes, I think I can offer a solution. Try something like this:

    $config['onload'] = 'var listener = google.maps.event.addListener(map, "idle", function() { if (map.getZoom() > 15) { map.setZoom(15); } google.maps.event.removeListener(listener); });';

    You can obviously change the zoom level of 15 to be higher or lower based on your preference. I haven’t tested the above but I’m fairly confident it should work. Let me know :) Good luck!

  5. sufyan says:

    Sir amazing work really appreciated i am very thankfull to you :).

    Sir i have a problem how to set center according to marker position i have saved users longitude and latitude in my database by giving him option of dragging marker but when i show their locations to visitors map extremely zoomed into the marker i want to set center according to marker position like when geo location center is auto its auto detect our location and marker in center position.

  6. @Rob – I can only think that the address or lat/lng you are specifying is not valid. If you’re trying an address, try changing to use an actual latitude and longitude and see if that works. Alternatively, try a different address. Let me know how you get on :)

  7. Rob says:


    Good structure in the documents, but why don’t Google show any maps. I see a grey screen with the message: (i will translate) :unfortunality, we dont have the images.. Or something like that, is that a error from Google?

    Btw Thanks for the inspirations!


  8. hussain says:

    Thanks buddy thats really a great library . so much helpful and easy . and documentation is so great thanks :)

  9. Anonymous says:

    Thank you for this library. Its really helping me on my projects.

  10. idilhaq says:

    Awesome! Great library! So helpful! Thank you :D