How to use Embed Google Maps?

I want to use the embed google maps api so to provide a static map on a retailers listing page showing their single address with a marker.

Right now I can only figure how to show the map using the Javascript API which has a pretty high cost associated once you go past 28,000 map views a month.

Trying to find the best way to circumvent paying ridiculous fees to google for displaying a map.

The way around could be sending a URL parameter to google maps and show the address in the new tab in google maps. Although maps won’t be embed.

Thanks @shpak.serhiy I already have the links to google maps set up for directions by car, train, bike and foot.

My issue is more about having a map displayed for visual purposes on the page. Directly under the map I have the links to google maps to get the directions.

I had a suggestion of using an HTML element but I can’t figure out the right code to get it to display.

I played with Google maps and figured out that it doesn’t allow iFrames.

Another workaround for you could be use of screenshots of maps. I’ve noticed this approach in LinkedIn below job description. The map is just an image:

I wouldn’t know where to start to get a screen shot automatically uploaded when a user is entering address details.

Really hoping to figure out how to set up the HTML element to store the map

I just don’t know how to put together the html in bubble to make this work

1 Like

Was there a solution found for this?

I have not found one. Please share if you do.

I’m just learning so I’m interested to know more about this too…

Wouldn’t an easy option b to save their address to the database and then just use the vanilla bubble Google maps to show a map with their location on it?

I’m guessing that is just me missing the point and you are wanting to do something different and I’m just interested to learn and try and figure out the solution as a learning process…

Yes, it is simple enough to do that, however the issue is the cost of doing that if you were to scale your app user base and the number of times that map needs to be shown.

If I were to do that, I have to pay Google for each time the map is shown, whereas if I have a static map, I don’t have to pay each time it is shown.

I followed another posts’ advice and saved the address to db…as I understand it, you pay for the API call…not the map use itself so you only have the cost once…I absolutely stand to be corrected on that :slightly_smiling_face:

1 Like

@boston85719 This part is easy with a Group to Image or Element to Image plugin.

Just thinking out loud here:

Step 1: Input address. This will populate the map using the normal Google API setup.
Step 2: Click Next. When user clicks ‘Next,’ have a workflow to capture an image of that map element using a plugin like this and save it under the user as MapImage. You can do this everytime the user changes their address.

This way, the map won’t load everytime a user visits the page. It will only load on the screen where the user will make changes to the address, which won’t be a normal occurrence.

I haven’t tried it myself but thought it could be worth a shot.

1 Like

Why not just save that address to the database and then use that to populate each locations map?

Same reason as stated before.

Test it and see. Look at your google console, pull up the page and keep refreshing the page with the map and see if it counts toward an API usage or not each time the map is loaded and the address is loaded into the map.

Does a plugin like that work with a map element? I’ve tested most of the plugins that are the same in nature of a group to image, but have not seen one that works with maps.

Sorry I missed your earlier response…thanks for replying again.

Interesting…another post elsewhere suggested the opposite so I will def check that out.

Thanks for the heads up…

The opposite of what? That you do not get charged for each use of the API? Or that using a map element with a geographic address to display is not a usage of the API?

Somewhere on the forum I recall it was said that if you save the address to the database then that is not a charged event to map that on the map and there’s obviously incorrect…

Thanks again for correcting me on that are appreciate it!

Yeah, Google Maps are Expensive to show…I use Leafy Maps Free Plugin to use other map providers like Mapbox or Stadia to have cheaper map views…can save thousands a month compared to Google if your app gains traction.

You are right, just tested and the image of the map doesn’t come out right. Best bet would be to create your own plugin to solve the problem. I’m no expert but I’m guessing it could be done fairly quickly with a simple JS library

I’m still hoping to use the HTML element to use the Maps Static API as I believe that is supposed to show the static map, and only pay for the creation of it, and not the display of it.

Plus, I can’t build a plugin for it, and doubt others can either since no existing plugin for element to image work with maps or graphs. I’ve reached out to some of the developers of those plugins to request the feature but none have been able to add it.