How To use Google Maps Javascript API

Ask Community
#1

Hi,

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.

image
image801×335 26.5 KB

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

image
image1349×583 79.9 KB

We have tried to emulate that in our code,

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

    image
    image1106×610 56.2 KB

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

    image
    image1136×621 36.1 KB

  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

image
image1233×636 78.4 KB

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

regards
Yash

#2

I have corrected the code in the control editor.

image
image720×287 9.62 KB

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

#3

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

Regards,
Mohit

#4

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.

#5

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.

image
image1358×629 100 KB

#6

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

image
image384×516 101 KB