Articles in this section
Category / Section

How to create and publish Google Map with Streetview as a custom widget

Published:
Follow the below steps to publish the Google Map with Streetview custom widget into the Bold BI application and use it.

Step 1: Download the Google Map with the Streetview custom widget. 

Step 2: Then you can generate the Google Maps API key through the help link.

Step 3: Once you generated the Google Map API key extract the download the custom widget and open the widgetconfig.json file and replace the key in the highlighted text and save the file.
Configuration file API key location

Step 4: Once you added the key in the widgetconfig.json file, pack the custom widget with the use of the help link.

​Step 5: Publish the custom widget to the Bold BI application with a help link.

​Step 6: Once you published the custom widget, the Google Map with Streetview custom widget will appear under the Miscellaneous section of the designer panel as in the following image.

Google map with streetview Custom Widget in item panel

​Step 7: Drag and drop the widget and configure the data. The Google Map with Streetview custom widget will render as in the following image.


Improvement in the Google Map with Streetview Custom Widget

​To debug and make changes in the custom widget, follow these steps:

  • Unpack the Google Map with Streetview custom widget (Google Map with Streetview.bicw) by following the steps in the mentioned link

  • Add the debugger to the sourcefile.js file's init() method. Also, add the needed changes in the sourcefile.js file.

  • Publish the custom widget by following the steps in this link.

  • Now, open the new dashboard in the Bold BI designer.

  • Open the Developer Tools in the Browser.

  • Drag and drop the Google Map with Streetview Custom Widget in the Designer.

  • Now, the debugger will trigger. 

Also, the Google Map with Streetview Custom Widget is developed using the Google Map API. For any new options, check the available API in the UG link

Methods and use cases in the Google Map with Streetview source file.

The following table explains the use case of some main methods available in sourcefile.js.


Methods

Use Case

Init()

This method will trigger when the Google Map with Streetview custom widget is dragged and dropped in the designer or initialized in the viewer.

Update()

This method will trigger when the widget is resized, data is configured in the widget, and when the changes are made in the property panel. Based on the respective changes the Google Map with Streetview object can be updated.

Related Links:
GoogleMapWithStreetView.bicw
Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
SK
Written by Sathish Kanniyappan
Updated
Comments (0)
Please  to leave a comment
Access denied
Access denied