ebarry/cartodb-gmapsv3

Use your cartodb table with Google Maps v3

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

Example

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
});

Functions

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: cartodb_gmapsv3.show();
• isVisible: Returns if cartodb layer is visible or not. Example: cartodb_gmapsv3.isVisible(); -> true | false