Skip to content

Latest commit

 

History

History
73 lines (56 loc) · 2.79 KB

README.md

File metadata and controls

73 lines (56 loc) · 2.79 KB

CartoDB library for GMaps.v3

Use your own CartoDB tables with Google Maps (version 3).

Using the library

Using the library is really easy, you'll only need:

  • Your CartoDB user name.
  • A public table.
  • A query.

Params

The library accepts certain params to manage the cartodb layer:

Required

  • map_canvas: The DOM element id where the map is
  • map: The Google map object create before
  • username: Your CartoDB user name
  • table_name: Your CartoDB table name
  • query: A query to experiment with

Optional:

  • map_key: If your table is private, you'll need the map_key parameter
  • map_style: Show the same style as you defined in CartoDB
  • infowindow: If you want to add interactivity to the layer, showing the infowindow (If you want to show specific columns, it must be a query, adding it 'WHERE cartodb_id={{feature}}', later it will be replace by the clicked cartodb_id. cartodb_id and the_geom_webmercator are REQUIRED parameters)
  • tile_style: If you want to add other style to the layer
  • autobound: If you want to zoom in the area where the layer is positioned
  • debug: If you want to debug the library, set to true

Note: If you choose a CartoDB private table you'll need to authenticate for using API methods.

Example

First of all 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:"xavijam",
table_name: 'test',
query: "SELECT cartodb_id,the_geom_webmercator,description FROM test",
tile_style: "#test{line-color:#719700;line-width:1;line-opacity:0.6;polygon-opacity:0.6;}",
map_key: "6087bc5111352713a81a48491078f182a0541f6c",
map_style: true,
infowindow: "SELECT cartodb_id,the_geom_webmercator,description FROM test WHERE cartodb_id={{feature}}",
auto_bound: true,
debug: false});

live example

Functions

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

  • update: It needs a new query to work. Example: cartodb_gmapsv3.update('SELECT * FROM test 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