iFrame Panel: Google Maps – OSKAR

The iFrame panel now can be used to display an interactive Google Map based on data from your data set with the Google Maps Embed API. his 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 Maps Embed API returns an interactive web page.

The API Key

Both APIs require 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. There are no restrictions for the Embed API It is supplied in the request with the parameter: key=INSERTYOURAPIKEYHERE

Google Maps Embed API

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

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

MAP_MODE
- place: displays a map pin at a particular place or address, such as a landmark, business, geographic feature, or town.
- view: returns a map with no markers or directions.
- directions: displays the path between two or more specified points on the map, as well as the distance and travel time.
- streetview: shows interactive panoramic views from designated locations.
- search: shows results for a search across the visible map region.
YOUR_API_KEY - Obtaining Your API Key
PARAMETERS
- Place Mode
  - q – defines map marker location, supports both + and %20 when escaping spaces.
- View Mode
  - center – Accepts comma-separated latitude and longitude value (46.414382,10.013988)
- Directions Mode
  - origin – Defines the starting point from which to display directions, supports both + and %20 when escaping spaces.
  - destination – Defines the end point of the directions, supports both + and %20 when escaping spaces.
- Streetview Mode
  - location – accepts a latitude and a longitude as comma-separated values (46.414,10.013)
  - pano – is a specific panorama ID. If you specify a pano you may also specify a location. The location will be only be used if the API cannot find the panorama ID.
- Search Mode
  - q – defines map marker location, supports both + and %20 when escaping spaces.
Each parameter is of the form: Parameters=paramter&parameter1&paramter2|…

Creating an iFrame Panel

Add an iFrame Panel to your Dashboard
Set Frame Style to HTML
Format as Shown in Image
Click OK
Then Save your Dashboard to save the added iFrame Panel

Example URLs

The following examples are good options inside the URL placed in the iFrame Panel

HTML Template with Modification:

<iframe
  width="600"
  height="450"
  style="border:0"
  loading="lazy"
  allowfullscreen
  src="https://www.google.com/maps/embed/v1/place?key=INSERTYOURAPIKEYHERE
   &q=Space+Needle,Seattle+WA">
</iframe>

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

https://www.google.com/maps/embed/v1/place?key=INSERTYOURAPIKEYHERE&q=Space+Needle,Seattle+WA

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

If you attempted to to do this through a Details chart like the other maps, 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.

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.

Embed API must use iFrame

You attempted to to do this through a Details chart like the other maps.

The Google Maps Embed API must be used in an iframe.

For More Information:

Dashboard & Chart Design Articles
Google Maps Embed API Documentation
Dashboards Builder Manual 9.13.6 Details

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