Google Maps Plugin - Updated

Ok thank you, I understand but is there any available plugins for voice instruction for Bubble apps. And with regards to showing the directions can you share any editor links for the examples.

I donā€™t believe there are and free sources out there. If you take uberā€™s app for drivers as an example, you will notice the app draws the directions (which can be done in bubble) then overlays the driverā€™s position and heading on the map. When the driver wants to navigate he is sent to google maps navigation or Waze or any other preferred map.

Ok thank you. Can you please refer/send me a link of bubble app that can overlays the driverā€™s position and heading on the map.

If the plugin store would hurry up i have what you wantā€¦ i have developed every component from the compass (works better that i ever expected) to the speedometer, way more routing options than google, way points into the hundreds at a time, speed alerts for every street, Voice guidance and a few more bits tooā€¦ So come on plugin store!! but at least you know its possible with bubbleā€¦ and a fair bit of code.

2 Likes

This works great! Thanks for sharing.

I realize this is a Google API setup thingā€¦ BUT: I cannot get this plug-in to work properly when I attempt to set credentials (security) on my API keys. In the Key restrictions setup Iā€™ve tried every dang permutation that should workā€¦ however, nothing does. For example:

 *mydomain.com/*
 mydomain.com
 mydomain.com/*

Etc. I can only get the calls (such as to distance and time) to complete without a 403 error if my key is completely unprotected. Can anyone point out the correct way to set that up?

Iā€™m running into some errors with the Google Maps API in general. Trying to debug myself, but filing a bug report soon.

Are you getting any errors in your console?

The error Iā€™m seeing is "Google Maps API error: ReferrerNotAllowedMapError (https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error). URL to be authorized: [my Bubble app URL]

Debugging notes:

  • My domain is properly associated with my Google account.
  • I have another app with API keys within the same Google apps account affiliated with a different domain and app that are working.
  • When I remove my domain, it works with my own API keys (no HTTP restrictions).
  • Iā€™ve had Google Maps API keys and custom domains associated with apps before and they worked properly.

The keys that bubble get you to set in the app settings section need to be unrestricted from memory when you also start adding your own JS referencing other methods.

@jarrad by that, you mean in the Google API settings, to have None selected? Iā€™ve tried that to no avail. If youā€™re referring to something else, not quite sure what. Appreciate your help!

Yer so I have found that when I have say the bulk geocoding plugin on a page although the plugin is happy using a key with a HTTP referrer the key that you add to your apps setting tab for bubble to use cannot and you need to select ā€˜noneā€™ as you have above.

We have pushed a fix for ā€˜Google Maps API error: ReferrerNotAllowedMapErrorā€™. This should be live now.

If I want to get the Google ratings for the places shown in the map, do I need this plugin? Please point me in the right direction.

Hey there,

I am the developer. PM me what you need and i will be glad to help. as for documentation its clearly mentioned in the pluginā€™s service url and its the same as google maps api documentation

OK I pmd you. Tx for quick reply.

Tip for those seeking documentation: this post from @dan1 Displaying journey time for both driving and public transport illustrates how to access functions that return text (like driving time duration) using the ā€œGet Data from An External APIā€ option in ā€œDynamic Textā€ in a text box.

The parameters are documented in the API docs, such as this page for Distance Matrix

Tips for Google:

  1. you donā€™t need to sign up for a ā€œfree trialā€ of Googleā€™s cloud platform, just register your project with a Google account.

  2. after creating a project, ā€œenableā€ each API you want to use, then get ā€œcredentials.ā€ Paste the resulting API key into each box on the plugin page in your app.

2 Likes

Hi @AliFarahat ,

I just came across your Google Maps Extension plugin and found it exactly what I was looking for on a feature I am trying to integrate atm. I am trying to use the Gmaps Directions map to show a dynamic route from point a to b (my ideal understanding would be, that it is being shown in a regular google maps format, with a default driving route between origin and destination). The issue I find is, that, whatever coordinates I include for origin and destination, the Gmaps Direction on my page always remains completely empty.
I used the same api key for all fields of the plugin (also have dev filled in), and this is my active geocode key I am using successfully on the page already (I also have all features activated on my Google dashboard). As for the address codes for origin / destination / place to center on I am using the format lat,long , as advised by you in another thread.
Am I missing something for the map to display the route (or showing anything)? Maybe I need to place the map within a group of a specific format?

I have started running out of ideas :frowning:

Man @AliFarahat ,

I have read all posts on bubble about your plugin before disrupting you, but cannot find out the following thing. After entering Google Maps Api Key into your plugin, selecting Google Maps API as data source, entering latitude and longitude for start and finish locations correspondingly, unfortunately it is still not possible for me to show on the map a simple route from A to B.

I would be really greatful if you would find a minute to look at the photo I attach and give me a hint, what could be a potential problem. Thanks in advance!!

Just a guess, but have you set up a billing account with Google? They rolled out some changes in the middle of 2018, which you can read about here.

Hi @sudsy , thanks for your guess! Yes, i have created it.

Demo link is dead, Unable to identify the usages