Use your cartodb table with Google Maps v3
Pull request Compare This branch is 3 commits ahead, 78 commits behind Vizzuality:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

What is the CartoDB library for GMaps v3?

This library allows you to use your own CartoDB tables with Google Maps v3.

Using the library

Using the library is really easy. It accepts the following parameters to manage the behavior of your CartoDB layers:

Parameter name Description Required
map_canvas The DOM element id for the map. Yes
map The Google Map object. Yes
username Your CartoDB user name. Yes
table_name Your CartoDB table name. Yes
query A SQL query. Yes
map_style Show the same style as you defined in CartoDB. No
infowindow If you want to add interactivity to the layer, showing the info window. The value can be a string containing the sql to get te feature from the server o an object defining your custom infowindow No
tile_style If you want to add other style to the layer. No
auto_bound If you want to zoom in the area where the layer is positioned. No
debug If you want to debug the library, set to true. No

Usage notes

If you choose a CartoDB private table you'll need to authenticate beforehand. If you want to show specific columns in the info window (via the infowindow parameter), the columns must be in a query using WHERE clauses. Keep in mind the cartodb_id and the_geom_webmercator columns are required.

If you don't want to write the name of the table several times, you can use {{table_name}} in the query, tile_style and infowindow parameters. {{feature}} is required in the infowindow paramenter when you want to show specific information on it.

We strongly recommend the use of the files available in this repository. These are tested, and if you decide use updated ones, the library could not work.

Custom infowindow

You can see a live example

You can pass an object as infowindow parameter to set your own style. The object accepts the following parameters:

Parameter name Description Required
sql The sql to get information from the server for the specific infowindow Yes
template The html to generate the infowindow. You can use {{field_name}} into the markup and it will be replaced by the value from the query result. Yes
pixelOffset The offset distance from the marker point. The value can be a google.maps.Size object or a callback. The callback will be called with the infobox's width and height as parameters and it must return a google.maps.Size object No
className A CSS class to append to the root div No
width The infowindow's width No


Here's a live example!

First create your map:

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(20, 0),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false

And then add the CartoDB layer:

var cartodb_gmapsv3 = new google.maps.CartoDBLayer({
    map_canvas: 'map_canvas',
    map: map,
    user_name: "examples",
    table_name: 'earthquakes',
    query: "SELECT cartodb_id,the_geom_webmercator,magnitude FROM {{table_name}}",
    tile_style: "#{{table_name}}{line-color:#719700;line-width:1;line-opacity:0.6;polygon-opacity:0.6;}",
    map_style: true,
    infowindow: "SELECT cartodb_id,the_geom_webmercator,magnitude FROM {{table_name}} WHERE cartodb_id={{feature}}",
    auto_bound: true,
    debug: false


New funcionalities are coming, in the meantime you can use:

  • update: It needs a parameter and a new value to work. Example: cartodb_leaflet.update({'query':'SELECT * FROM earthquakes WHERE cartodb_id>2'});
  • destroy: Removes the cartodb layer from the map. Example: cartodb_gmapsv3.destroy();
  • hide: Hide the cartodb layer from the map (For now, hide and destroy are the same, but will be replace in the future).
  • show: Show again the cartodb layer in the map. Example:;
  • isVisible: Returns if cartodb layer is visible or not. Example: cartodb_gmapsv3.isVisible(); -> true | false