Details Chart: Google Maps – OSKAR

This will require Builder privileges for setup and implementation.

The Details presentation charts now can be used to display images of Google Maps based on data from your data set utilizing the Google Static Maps API. This API is utilized from within iDashboards through an HTTPS request. Having your site HTTPS enabled (SSL) is required for the API key. A request to the Static Maps API returns an image.

The API Key

The Static Maps API requires an API key in the request. The API key allows usage monitoring by the application, but also allows Google to contact the developer about their application usage. The Static Maps API is limited to 25,000 image requests per day. This can be obtained thought the Google Cloud API Console. It is supplied in the request with the parameter: key=INSERTYOURAPIKEYHERE

Google Static Maps API

The Google Static Maps API generates an image of a map based on a URL parameters in an HTTPS request. The parameters that are of most interest in iDashboards are described below. It should also be noted that the URL is restricted to 2048 characters.

Location Parameters

center (required) defines the center of the map, equidistant from all edges. This parameter takes a location as either a comma-separated {latitude,longitude} pair ("40.714,-73.998") or a string address ("city hall, new york, ny") identifying a unique location on the face of the earth. Locations
zoom (required ) defines the zoom level or magnification level of the map. This parameter takes a numerical value corresponding to the zoom level of the region desired. Zoom levels

Map Parameters

size (required) defines the rectangular dimensions of the map image. This parameter takes a string of the form {horizontal_value}x{vertical_value} (500x400) Maps smaller than 180 pixels in width will display a reduced-size Google logo. This parameter is affected by the scale parameter; the final output size is the product of the size and scale values.
- scale affects the number of pixels that are returned. scale=2 returns twice as many pixels as scale=1 while retaining the same coverage area and level of detail, this is useful for high-resolution displays. The default value is 1 and only other value is 2. Scale Values
markers define one or more markers to attach to the image at specified locations. This parameter takes a single marker definition with parameters separated by the pipe character (|). Multiple markers may be placed within the same markers parameter as long as they exhibit the same style; you may add additional markers of differing styles by adding additional markers parameters. Note that if you supply markers for a map, you do not need to specify the (normally required) center and zoom parameters. Maps Static API Markers.
Each markers parameter is of the form:
```
markers=markerStyles|markerLocation1|markerLocation2|…
```
The available marker style descriptors are:
- size – This descriptor specifies the size of the marker. The possible values are tiny, mid and small. The default is a normal size.
- color – thisspecifies the color of the marker. It can be a 24-bit color (e.g. 0xFFFFCC) or a color from the set {black, brown, green, purple, yellow, blue, gray, orange, red, white}.
- label – this specifies a single uppercase alphanumeric character from the set {A-Z, 0-9}.
- The following descriptors will style the associated markers with small red pins with the letter D. size:small|color:0xFF0000|label:D

Creating a Details Chart

Create a new Presentation Details Chart
Set Frame Style to HTML
Format as Shown in Image
Click OK
Then Save your Details Chart

Example URLs

The following examples are good options inside the URL placed in the Details Chart

URL Format

https://maps.googleapis.com/maps/api/staticmap?size=400x400&scale=2&center=${value:Street} ${value:City},${value:State}&markers=color:red|${value:Street}+${value:City},${value:State}&
markers=color:yellow|size:small|[inc=others,max=3]${value:Street} ${value:City},${value:State};key=INSERTYOURAPIKEYHERE

HTML Template with Modification – displays satellite images instead of standard map images:

Coding that has worked in iDashboards v11.1e, all YOU need is your API Key!

Please Note: You must enable proxy server and the maximum character length for https protocol is approximately 2000 characters depending on your browser. If your URL goes over this limit then no image will be created and no map will appear in the chart.

Possible Issues

You may get a link that appears to be broken.

In the Chart Preview box, right click on that broken image
Then select: Open image in new tab
A new browser tab will then open and it will give you a message

API Key Needed

This would occur if you are trying to use the Google Maps server without an API Key, some earlier versions this was accepted (prior to November 2018).

The Google Maps Platform server rejected your request. You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account

Link provided in message: http://g.co/dev/maps-no-account

Project Not Authorized for API

You do not have this API Enabled. You need to log into your Google Cloud API Console to do this.

Google Maps Platform rejected your request. This API project is not authorized to use this API.

For More Information:

Google Static Maps API Documentation
Dashboard & Chart Design Articles
iDashboards Builder Manual 9.13.6 Details
iDashboards Builder Manual 8 Designing Charts

If the above is unable to resolve the issue, then please contact truOI Support for further assistance.