Rings On Google Map?

Hello,

Anyone have any idea how I could get these two Rings added to my Google map?

1 Like

I think it can be handy if anybody can figure out how.

HTML element.

https://developers.google.com/maps/documentation/javascript/examples/circle-simple#try-it-yourself

You will need to activate Google Maps JavaScript API from the Google Developer Console and grab the API Key.

Then pass in the lat/long etc.

Although you might not be able to overlay bubble information on it that easily.

2 Likes

Be careful though, usually, adding the JS yourself will conflict with the JS we already load, you might not need to add it.

It seems to be working OK. Will it cause issues for anything else that we’re not immediately aware of?

So if there was already a map on the page / app ?

This doesn’t add any new js libraries as far as I can see.

Sometimes you get an error in the console coming from Google

Hi There, I also need a ‘circle’ per radius feature on my map … how do I do that ?..or… how do I incorporate the Java Script code into a bubble prog ?

The Google JS will work for this.

But make sure it doesn’t conflict with anything else running on your app.

Thats actually the question… how do I configure Gooogle JS.
I have generated a key… whats next ?:slight_smile:

Copy paste the google html code (for the circles: https://developers.google.com/maps/documentation/javascript/examples/circle-simple#try-it-yourself)

in an html element on your page and repalce the lat/long values with dynamic bubble content.

I had to tick the ‘iframe’ checkbox on the html element properties for it to load.

3 Likes

Thanks. Will try that soon😃

Thanks!
All works.
Now I want to add a listener to the size of the circle…
Hope this will go smoother.
Thanks

1 Like

Should the html element cover the whole map or is it its own map?

1 Like

bump :point_up_2:

EDIT:
& @raymond, if you guys haven’t already solved it:
The function “initMap()” creates the map in the HTML element

for other ppl reading this post. There’s your explanation to that sub question. :slight_smile:

2 Likes

I tried this, and everything was working perfect. Then it stopped working and I don´t know why, I didn´t modify any of the code after it was working.

1 Like

I checked again and it seems that problem is related to the dynamic data I have inserted to the HTML bolck.
When I copy and paste (without modifying anything) the example given by google it works perfectly.

1 Like