Skip to content

jherencia/cartodb-gmapsv3

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Use your cartodb table with Google Maps v3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%