
CARTO + Google Maps
Build applications using CARTO & Google Maps.
Getting started
In this guide, you will learn the basics of visualizing a CARTO dataset with the Google Maps Javascript API. There are no previous requirements to complete this guide, but a basic knowledge of Google Maps Javascript API would be helpful.
After completing this guide, you will have your first Google Maps API map with a CARTO dataset!
Basic setup
The first thing you need to do is to add all the required dependencies:
- Google Maps Javascript API (the API key below is only valid for carto.com so you will need to provide your own API key)
- Polyfill.io
- deck.gl, including CARTO submodule
|
|
Add map container
Next, you need to create a div
inside the body
where the map will be drawn and you need to style them to ensure the map displays at full width:
|
|
Create map and set properties
Once you have a div
for your map, you can use the google.maps.Map
constructor to create your map with the desired initial view:
|
|
At this point you will have a basic map:
View this step here
Define credentials
In order to render data from CARTO you need to have a CARTO account and then get the necessary credentials.
The first thing you need to do is authenticate the client with the deck.carto.setDefaultCredentials
function, using your own username
and apiKey
. For guides and examples, we use the public
CARTO account so you can try out the library:
|
|
Create map layer
Now you can add a map layer from the public account. In order to add the layer, we will use the GoogleMapsOverlay
class from deck.gl. We need to specify the layers as an array. In this case, we only have one CartoSQLLayer
from the deck.gl CARTO submodule. We pass three parameters to the constructor:
-
data
contains the dataset that we want to visualize. It can be the name of a dataset or a SQL query. For best performance, we recommend to use always a SQL query retrieving only the fields we need in the client. Otherwise we could be generating very large tiles that will degrade the performance. -
Style parameters. In order to display the information the
CartoSQLLayer
uses the deck.glMVTLayer
that takes advantage ofGeoJsonLayer
to style the features, so all the properties of this class are supported. The style parameters depend on the dataset type of geometry. In this case, we are adding a point layer, so we specify the point color using thegetFillColor
property and the point size through thepointRadiusMinPixels
property.
|
|
Add map layer
Finally you need to use the [setMap
] function on the GoogleMapsOverlay
object to add the layer to the map.
|
|
All together
You can explore the final step here
|
|