How To use Google Maps Javascript API


We are trying to use the Google maps Javascript Api, to get dynamic maps , with a dragable marker.

From the documentation, we are trying to execute the elementary example.

There is an example at JSFiddle, the IDE, for this with all HTML, CSS and JS code.

We have tried to emulate that in our code,

  1. Create a custom control with same HTML and CSS.

  2. in the control editor, we have the JS code in the control initialization

  3. Using this custom control in the app.

We are getting an error
uncaught (in promise) ReferenceError: google is not defined
at BSCOMPONENTS.Googlemaps_js.initComponent (eval at appendHandlerBarTemplateToDom

Is the initialization code incorrect?
Is this the right way to go about using google maps JS api?


I have corrected the code in the control editor.

This has gotten rid of the error , but the output is blank!

Hi Yash,
As discussed over call, we are looking into this issue and will be getting back to you as soon as possible.


Hey Mohit,

We are able to render the map using inline html on a DronaHQ HTML control.
But since its a html control, we can get back data upon selection on the map.

We have broken down the code into JS,HTML,CSS and updated a custom control, but that doesn’t render the map.

Kindly suggest.

Hey Mohit,

Thank you for the help. Sachin has help us get the maps rendering and connection with the api. Thank You.

We are using the function editor and built a custom funciton. We are facing another challege. Exporting values from the newly built custom function.

  1. We are passing the new function as reference to another control in builder.
  2. THis should initiate the getvalue () function. We are not able to initiate that.

In the image below,

input label referes to MyControl ( new custom gmpas api connection control)
We have a debugger in the getvalue.
We are not able to get control inside getvalue.

Thank you Sachin, Mohit for all the help and guidance!
Its working as expected!!