[PLUGIN] - Google Maps Geometry/Drawing + W3W

[pork1977gm]

No problems. The user doesn’t have to identify them, just put the action into the various events I mentioned and it will run inside them when things happen on your page, like for example when a polygon is drawn. Set it all up and if you get stuck just message me and I’ll help you fix any problems you’re having. You will need to use the events though for what you’re doing.

For specific coordinates on load, use the MAP CENTER options in the maps options. If you still notice the delay and it’s too long let me know.

Paul

[pork1977gm]

Thanks for that, I see what’s going on now. Just to give you an understanding as to what’s happening…

So one thing we can’t change here, is Bubble’s behaviour or to be more precise, when it decides to try and load the maps API. As soon as you click that button, Bubble attempts to loads the Maps API (it doesn’t do it on page load for performance reasons), it then runs the calculation to return the coordinates at the address through the action. But… because my plugin has essentially already loaded the maps API, that’s why the error then appears at the time you click the button - and this applies to any Google Maps plugin you’ll find in the plugin store.

I’ve added some substantial amount of checking code into this plugin for which the first part you already see through the console logs, where it states:

google maps api script is being loaded by the plugin with additional places, drawing and geometry libraries included

Now, if you were to put an address box onto your page and set the choices to geographical places, then when the page loads, Bubble see’s this and it will load the maps API before anything else. When that happens, the plugin will do it’s detection thing and you’ll see the console log message change to:

google maps api script already loaded by bubble, drawing and geometry libraries will be added with the correct language

When you click the button now, it will use the maps API script which Bubble loaded and the error goes away. Anything else related to using current user’s location or other geographical data types will all work in the normal way and hopefully now the plugin will now detect all this and function as normal.

I’ve just added the search box onto your page and at the moment there are no conditions being applied anywhere. I would set the map to be not visible and only make it visible when that search box is visible. That will ensure the 2 load in the right sequence. In your case, you don’t want the map to load before that search box. Set the search box to be width/height of 1px and send it to the back to its sitting behind all elements, you can mark it disabled also which won’t affect Bubble loading the maps API.

[rob.lewis]

Really huge help Paul! Thanks for going above and beyond to solve this.

Many thanks.

[rob.lewis]

Hey Paul, question about Go to Coordinates. Is the Go to Coordinates action suppose to set the values for Map Center Lat & Long?

I noticed after executing the action the Map Center continues to hold the prior origin and not the new map coordinates. My workaround has been to set a marker in the new location and use the Go to marker option. This seems to update the Map Center to the new coordinates. Thanks!

[pork1977gm]

No it shouldn’t be doing that, I just checked and it seems to be ok.
Have you run step-by-step to make sure the action isn’t running anywhere in your workflow?

[condocrm]

Hello Paul,

Is there a way to disable Google Places from the Google Map?

[rob.lewis]

Thanks for the response. It’s not a priority, but I did a quick test on another page.

1. Load a hidden Search Input (geolocation) to prevent double API load.
2. Load the map.
3. Set List of Markers from database with coordinates (using Fit to Bounds=yes).
4. Set state of variable map_center & display in Text box.
5. Click a Marker. On click workflow is Go to Coordinates using Clicked Marker Lat/Long. Pause 1 sec. Then set new map_center state.
6. Map Center state retains original value with no change.

Hope this is helpful. Thanks again.

[rob.lewis]

I’m gonna guess you’ll need to provide more info as to your request.

You can determine what your maps look like by setting the API’s enabled with your API key, as well as by defining a custom map style. Both of these are available in the Google Maps Platform dashboard.

[pork1977gm]

We’ll, you’d have to be a little more specific as to disable it would be to not load the library and that you can’t do in the plug-in as it’s relied upon for functionality. Why do you ask? I might be able to help if you’re running into a problem etc.

[pork1977gm]

Great, ok thanks for the info, I’ll take a look and see what’s going on.

[pork1977gm]

Hi @rob.lewis

Both map center states were populated inside the “dragend” and “zoom_changed” events, so they only got updated after a map drag had finished and whenever the zoom was changed, neither of which triggered when the “go to coordinates” action ran or when a marker was clicked.

I’ve moved things around so those states now get populated when the “bounds_changed” event triggers instead. Just done a few tests and it seems a lot better now, do you want to update and let me know if it’s ok for you too? The states now dynamically change as the map bounds are changing since this event triggers all the time when your moving the map around.

Paul

[rob.lewis]

Boom! That’s great. You rock man. Sorry it took a minute to get back to this.

[pork1977gm]

All good and no probs, glad it’s working

[pidoko1]

Good day Paul,

First, thank you for this amazing program. Next, I am trying to get the paid version going in my Bubble.io app, and I am just getting a blank white screen in the Bubble editor when I add the Google Map visual element and the API keys. Where do I find the “key(shared param.)” value because I currently have it blank, and I am wondering if that is the issue?

Regards,
Peter.

My Google Map API key is set in both the

[pork1977gm]

Hi @pidoko1

Thank you!

That sounds a bit strange, can you put up a screenshot of how it looks for me?
That “key (shared param)” value is for the W3W API calls. You shouldn’t need that to use the map but if you see any errors in the console, let me know.

Paul

[pidoko1]

Hi Paul,

Here it is

Regards,
Peter

[pork1977gm]

It looks like there’s some issue with the API key. When I browse the page, it shows me this

ApiNotActivatedMapError
The Maps JavaScript API is not activated on your API project. You may need to enable the Maps JavaScript API under APIs in the Google Cloud Console.

Try this link, it might help out here
https://developers.google.com/maps/get-started#enable-api-sdk

Paul

[condocrm]

Hello Paul, I’m trying to eliminate the markers with all kinds of different businesses that are populating the map.

The system I’m currently working on don’t need that. Is there a way to remove it?

Best regards,

Marcos

[pork1977gm]

Hi @condocrm

I should be able to help out here, can you give us some more info when you say “with all kinds of different businesses”

I can possibly help you with this but I need specifics. This is a filtering thing you’re after right? so how are you currently getting the marker coordinates to add to the map?

Paul

Paul

[condocrm]

Hello Paul,

All of these markers would have to be removed. I think they are loaded by the places API, right?

Best regards,

Marcos