Google Maps


With the ‘maps’ block you can display map from Google Maps, with optionally:

  • Traffic information
  • Route to a certain destination.

First get a Google Maps API key: Getting a Google Maps API key

Adding the GM to the dashboard:

config['gm_api'] = 'xxxxxxxxxxxxxx'; // The API key you received from Google

blocks['mymap'] =  {
  type: 'map',
  latitude: 40.4989948,
  longitude: -3.6610076

and used in:

columns[3] = {}
columns[3]['blocks'] = ['mymap']

Block parameters

The Google Maps module uses the following block parameters:

Parameter Description
width Width of the Google Maps block compared to the full screen, not the column. Full screen width is 12. Meaning width of 6 will give a width of 50% of the screen size.
height The height of the block in pixels
aspectratio The height of the block compared to the width. (default: 0.6) Only applicable if height has not been defined.
latitude Latitude
longitude Longitude
destlatitude Latitude of the destination
destlongitude Longitude of the destination
zoom Zoom level (default 15)
true: Show marker on the map (=default)
false: Don’t show the marker
true: Show actual traffic (=default)
false: Don’t show traffic info
true: Shows the default Google Maps UI
false: Hides the default Google Maps UI (=default)
true: Show route distance and travel time (=default)
false: Hide route info
true: Show refresh button in upper right corner (=default)
false: Hide refresh button

Config settings

The Google Maps module uses the following config settings:

Setting Description
gm_api The API key you received from Google


Getting a Google Maps API key

Obtain your Google Maps API key from:

  • Press Get Started

  • Choose Maps, and press Continue

  • Follow the instructions

If you would like to be able to display routes, then you have to enable the Directions API as well.

You have to activate billing.

Using Google Maps API costs money. However, you get a monthly credit of $200 for free (June 2023).

If you have a low refresh block parameter, and show multiple maps simultaneously, you may run out of your monthly credit quite quickly. So, especially in the beginning, pay attention to your API usage via the Google dashboard.

To prevent unnecessary cost, I would recommend to set some quotas in the Google Maps dashboard. For instance, set a limit for the Maps javascript API as well as the Directions API to 500 requests per day. This will limit the cost to max $3.50 + $2.50 = $6.00 per day, meaning you will not reach the $200 monthly credit.

Show a route to a destination

Example of a block to show a route:

blocks['route'] = {
  type: 'map',
  latitude: 52.377956,
  longitude: 4.897070,
  destlatitude: 51.4176337,
  destlongitude: 5.4060209,