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

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