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 (210)
  1. Israel says:

    Yes, very useful your library, thank you and great job!

  2. Hi Jeremy, Thanks for getting in touch. Regarding loading thousands of markers I think you have a couple of options. Taking CodeIgniter out of the picture for a moment, I would recommend looking at the following:

    Clustering – See http://biostall.com/demos/google-maps-v3-api-codeigniter-library/cluster
    This is supported by the library already and involves grouping the markers when viewed from a higher level.

    Use a KML file – See https://developers.google.com/kml/documentation/kml_tut
    Again, the library already supports loading a KML file

    There’s also an interesting article here (https://developers.google.com/maps/articles/toomanymarkers) that explains multiple techniques with regards to dealing with lots of markers.

    Please let me know if there is a particular route you would like to go down and, if the library doesn’t support it, I’ll be happy to help build it in.

    Steve

  3. LegendaryJer says:

    Hey, thanks for this library, it’s awesome! I am working on an internal project that requires that I plot several thousand points on the map. I am adding the markers in a loop, and If I limit the script to around 500 markers it works great, when I get above that the map fails to load. Any suggestions on handling a high number of markers?

    Thanks!

  4. Hey there Steve,

    Just thought I would mention this in case people get stumped:

    If you set HTTPS to TRUE in the config array google maps is served over HTTPS. Hooray! However, if clustering is turned on the clustering library and default icons are NOT served over HTTPS. I edit the code in the library to ensure the clustering library comes in over HTTPS. What had me stumped was the default icons for cluster (those little radioactive style markers) are served by Google over HTTP. There is no HTTPS equivalent.

    The solution: define your own style and serve over HTTPS yourself! Here’s the code, include in the options array when creating the cluster marker (Line 1810 or so of the library)

    var clusterOptions = {
    gridSize: ‘.$this->clusterGridSize;
    if ($this->clusterMaxZoom!=””) { $this->output_js_contents .= ‘,
    maxZoom: ‘.$this->clusterMaxZoom; }
    if (!$this->clusterZoomOnClick) { $this->output_js_contents .= ‘,
    zoomOnClick: false’; }
    if ($this->clusterAverageCenter) { $this->output_js_contents .= ‘,
    averageCenter: true’; }
    $this->output_js_contents .= ‘,
    minimumClusterSize: ‘.$this->clusterMinimumClusterSize.’,
    styles: [{
    height: 53,
    url: “‘.base_url(“images/cluster-marker-1.png”).'”,
    width: 53
    },
    {
    height: 56,
    url: “‘.base_url(“images/cluster-marker-2.png”).'”,
    width: 56
    },
    {
    height: 66,
    url: “‘.base_url(“images/cluster-marker-3.png”).'”,
    width: 66
    },
    {
    height: 78,
    url: “‘.base_url(“images/cluster-marker-4.png”).'”,
    width: 78
    },
    {
    height: 90,
    url: “‘.base_url(“images/cluster-marker-5.png”).'”,
    width: 90
    }]
    };
    markerCluster = new MarkerClusterer(‘.$this->map_name.’, markers, clusterOptions);
    ‘;

  5. Hi Shane,

    Thanks for getting in touch. I’ve taken a look at the Google Maps API and it appears as though they’ve added a new parameter of ‘units’ which allows you to specify if directions are provided in metric or imperial (ie. kilometres or miles).

    I’ll add this new parameter to the library tonight and drop you an email once it’s done.

  6. Shane says:

    This is a wonderful library

    I have one problem when I use the directions it display the distance in km and not miles I am in the uk and we use miles.

    I have tried to add $config[‘region’] = ‘UK’; but when I do the map will not load the directions. is there a way to always show the directions with the distance in miles.

    Any help would be very much appreciated.

    Once again thanks for this great library.

  7. Tejinder Singh says:

    great thing . thanks a lot…

  8. jrodeldu says:

    @Steve Marks

    Thanks dude!! Actually that parameter is not setted, but i found that we had a mistake cause the $marker[‘position’] was using a string with the province field instead of city and now works fine. Anyway i’m going to set the regiom parameter too. Also used a function to scape accents from address just in case.

    If an address is shown in wrong place is cause google maps does it wrong too. So now its perfect! Thanks again.

    PD: sorry if im wrong typing in english :P

  9. @John – Thanks for getting in touch. I wondered if you’d tried setting the ‘region’ parameter to ‘es’ when declaring the maps parameters? Let me know if you’ve tried this, or if it doesn’t work, and I’ll be happy to take a closer looks.

    Good luck!

  10. jrodeldu says:

    Hi Biostall

    The Library is awesome but im having some troubles with some locations. I’m from Spain and for example if I pass the location ‘Tom├ís Morales, 23’ the map shows in wrong situation while ‘Tomas Morales’ goes to the right point. And sometimes the marker is in the middle of the sea.

    Can you help me??

    Thnx

    John

  11. Kenneth says:

    Thank you so much Steve.
    It worked perfectly.
    This is what you do:
    ………
    $lat = $row->lat;
    $lng = $row->lng;
    $cordinates = “$lat,$lng”;
    $marker = array();
    $marker[‘position’] = $cordinates;
    …………

    Thanks again.
    Ken.

  12. @Kenneth – Thanks for getting in touch. With regards to your question, variables in PHP are not converted to their real values in single quotes. Therefore I believe your ‘position’ and ‘icon’ parameters will not be gettings parsed correctly.

    Try using double quotes or putting the variables outside the single quotes like so:

    $marker['icon'] = 'http://google-maps-icons.googlecode.com/files/blue'.$store_id.'.png';

    Hope that helps. Please feel free to give me a shout if any more questions or if this doesn’t work.

    Thanks again.

  13. Kenneth says:

    Thank you so much for this. It is exactly what I need.
    Since all the markers have to be loaded from the controllers. Please tell me how I can render them so that they be displayed. I am extracting them from a database….
    This is what I am doing and it is not working. Any suggestions?
    ….
    $this->googlemaps->initialize($config);
    $query = $this->member_model->estate_stores(1);
    $i = 0;
    foreach ($query->result() as $row)
    {
    $i++;
    if ($i lat;
    $lng = $row->lng;

    $marker = array();
    $marker[‘position’] = ‘$lat, -$lng’;
    $marker[‘infowindow_content’] = ‘1 – Hello World!’;
    $marker[‘icon’] = ‘http://google-maps-icons.googlecode.com/files/blue$store_id.png’;
    $this->googlemaps->add_marker($marker);
    }

    ….

  14. @Loughlin – Big congrats on getting the site live, and thanks for choosing my library to be a part of it. I’m going to have a good play with the site now :) Good luck with it. Let me know if you need any help in the future.

  15. Paulo says:

    Great library. Congrats from Brazil.

    I apreciatte people who does such things.

    But i had problem with markers. It just did’n work.

  16. Loughlin says:

    Hey there Steve, we finally launched our site that is an events listing site that make big use of your library. http://www.yam.ie

    Massive amounts of respect and kudos to you sir for producing such a great library!

    cheers,
    Loughlin.

  17. Andrew says:

    Hi there. I just wanted to say wow and thank you. I have wanted to add maps to a side project for a while now but always pushed it off. Can’t wait to get this integrated.

  18. @Rubik – Be careful with quotes when adding HTML to infowindows. From memory you might need to escape (ie. add a backslash before) single and/or double quotes. I’ll look at adding a fix for this in the near future as this comes up quite a lot. Thanks for using the library!

  19. Rubik says:

    hey, man, I am having a problem with the InfoWindow – I can’t insert any HTML – my maps fail to appear at all.However, plain text content works fine. Any ideas? Thanks!

  20. @Matt Robinson – Thanks a lot. Glad you like it. There is no need for a key in Version 3 of the Google Maps API. V2 used to require one but they scrapped that. Thanks again

  21. Alv says:

    Congratulations on this outstanding intellectual work, awesome for someone in his 24! thank you for sharing, companies pay 60k+ in the UK for such expertise! great future!

  22. Matt Robinson says:

    Wonderful work – really straightforward to implement. One question I have, should there be an api key to input?

  23. Hi Bilal, Glad you like it :) You can change the size of the map by passing using the config parameters ‘map_width’ and ‘map_height’. By default the map is set to 100% width and 450px height.

    Does that answer your question? If not, please have a read of the documentation or feel free to give me a shout if I’ve got the wrong end of the stick. Thanks again. Steve

  24. Bilal says:

    Hi Steve,

    First of all i want to appreciate your hard work for developing such a wonderful library.
    Steve,my question is:

    How Can I change the size of google map?I want to reduce the size of google map as my map DISPLAY PAGE view is smaller in size as compared to map itself .is there anyway i can change the size and position of the map ????

    kind regards

  25. Khoirul says:

    Thank’s lot for your library Steve.. good job..

  26. Danny says:

    Great work! Keep it up!

  27. @David Teal – A good question! I’ve added an example of doing this to the ‘Demonstrations’ page which you can see at the URL below:

    http://biostall.com/demos/google-maps-v3-api-codeigniter-library/geolocation.

    I hope that answers your question. Thanks

  28. @Redmarine – Thanks for getting in touch. The library doesn’t support using the OSM textures but I don’t see why this couldn’t be added.

    I’ll look at adding it as a feature over the next week when I get a little time. I’ll drop you an email once it’s in and available for use. Cheers

  29. @Luis – Please take a look at the example linked to below that includes info windows when the markers are clicked:


    http://biostall.com/demos/google-maps-v3-api-codeigniter-library/multiplemarkers

    Let me know if you need any more help with this :) Cheers

  30. Luis says:

    This is a wonderful library. But how add a info bubble??

  31. Redmarine says:

    This is an outstanding library and I’ve found it quite useful for a school project of mine.

    I just got one issue. Does this library support swapping texture of Google Maps with OpenStreetMaps? If so, do you have any reference to an example in which could try out? Any help would be much appreciated.

    An sample I found of this in practice.
    http://maps.caseypthomas.org/gosm.html

    Thanks in advance.

  32. David Teal says:

    Hi Steve.

    Brilliant library. Great to be able to customise so much on the map and your demos helped me a lot.

    One thing i’m stuck on is trying to place a marker based on the user’s location. Is there any way to do this?

    Cheers.

  33. @rcanu – I’ve taken a look at the link provided and it seems to be working now. Can you please confirm if you’re still experiencing problems? Thanks

  34. rcanu says:

    Hi there Steve!

    Could you examine my site: http://www.thepbe.org/iwep

    Everytime I load the page, the map goes into a blank sea area.

    Cheers!

  35. BogeyBoss says:

    Thanks from Colorado for your excellent Google Maps CodeIgniter library. Also, your complementary YouTube demonstration is very well done…the screen-casted overview is professional with refreshingly clear diction, resolution and organized content. Appreciative cheers from the Rocky Mountains!

  36. Alex says:

    Man you just saved me tons of time and work! I wish I found this even sooner!

  37. Axel says:

    @Steve: Thx, this should do it.

    Greetings from Florida
    Axel

  38. @Axel – Good question. You can set the icon for a marker by setting the ‘icon’ value. Let me show you an example:

    $marker = array();
    $marker['position'] = 'Adelaide, Australia';
    $marker['icon'] = 'http://yoursite.com/marker_1.png';
    $this->googlemaps->add_marker($marker);
     
    $marker = array();
    $marker['position'] = 'London, UK';
    $marker['icon'] = 'http://yoursite.com/marker_1.png';
    $this->googlemaps->add_marker($marker);

    $marker = array();
    $marker['position'] = 'Paris, Frane';
    $marker['icon'] = 'http://yoursite.com/marker_2.png';
    $this->googlemaps->add_marker($marker);

    Notice how the first two have the same icon and the third has a different one? Does that answer your question?

  39. Axel says:

    Hi!

    Great job, saved a lot of work.

    I have a question though:
    Do you have an idea how to use different icons for markers? I mean have a few markers set with one icon, others with a different marker in the same map?

    Would be great!

    Thanks Axel

  40. @Farrukh – Thanks for using my library. Would you be able to comment back or email me the code that you’re using and what you are trying to achieve? I’ll then take a look and get back to you with an answer and/or updated library. Cheers

  41. Great library Steve, i would love to use it but there are some issues with it, that events are not properly triggered, e.g. ondrag it works only once and others too, could you please help to avoid this mess.

    Keep the good work continue.

  42. @ramon – I have just added support for setting the language. If you download the latest version of the library you will have access to do this. As a quick pointer, to set the map to Spanish for example you can do the following:

    $config['language'] = 'es';
    $this->googlemaps->initialize($config);

    See here for a full list of supported languages and their respective codes.

    Thanks

  43. ramon says:

    is it possible to change language?
    thanks

  44. ramon says:

    Thanks for this tool

  45. @Desmond – Thanks for your comment. I have looked into your question reference changing the language of the Google Map API and have found the following page:

    http://code.google.com/apis/maps/faq.html#languagesupport

    As you can see, it seems that the language ‘hk’ is not supported by the API. Sorry I can’t be of any more help. Let me know if you have any other questions though :) Thanks

  46. Desmond says:

    I would like to ask any idea to change the language of the map?

    I have tried to set the $config[region]=’hk’ but it didn’t work, the map is still showing English.

    Thanks a lot for your help.

  47. Can says:

    Wonderful :)

    Thanks

  48. hameed says:

    Waoo….. its Awesome library . … Great work :-)

  49. Bill says:

    This is a wonderful library. Thank you so much for this!

  50. rcanu says:

    Hey there! Very useful library. I will try using it for our site. Thanks Dude! Keep up the hype! Cheers!