Embedding Google Maps JavaScript API - What? Where? How?


#1

Hello again forum!

I am still trying to find my way around in blocs.

I easily managed to embed a google map in an html brick using the age old copy&paste in an iframe approach.

Unfortunately Google seems to have changed their policy recently and for a commercial website I am now obliged to use an API key to embed Google Maps in a website.
For my purposes a Google Static Map API (embed a map image without JavaScript or dynamic page loading) will do for now, I guess.

In the long run I would like to use customized maps with my content and imagery, but that means using Google Maps JavaScript API.

Has anybody done that with blocs already?
Where to put what?
If somebody in the know found the time to explain it in detail or may be even prepare a quick tutorial, it would be mighty helpful for such newbies as me.


#2

See also: https://developers.google.com/maps/web/


#3

Hey @area49

I can’t see that they prevent you from using the usual way.
Or do you get some info that says something else?


#4

@Jakerlund

Sure, the code from Google Maps in an iframe still works
(see: https://support.google.com/maps/answer/144361?hl=en&visit_id=1-636415204390302389-3186667844&rd=1). For a private website, if you want to embed the standard map, this is the way to go.

But as soon as you want anything outside this standard, e.g. remove the (ugly) address box and only show the map with a marker, you have to get an API key.

"(…) Google Maps APIs Standard Plan updates implemented on June 22, 2016, are as follows:

  1. We no longer support keyless access (any request that doesn’t include an API key). Future product updates are only available for requests made with an API key. (…)"

For full text see: https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update


#5

@area49
You learn something every day :fearful:
I had no idea.

Seems like Google standard, put out stuff and when lots of people are using them they either remove them or change everything.


#6

@Jakerlund
There is more to come…

“(…) There are no usage limits for the Google Maps Embed API. You can embed maps or Street View panoramas on your high-traffic websites without fear of hitting a usage cap or query-per-second throttling. (…) The Google Maps Embed API may include on-map advertising. The ad format and the set of ads shown in any given map may change without notice.(…)” See: https://developers.google.com/maps/documentation/embed/guide

That is when I decided to go another way to embed a Google map.


#7

@area49 oh lovely, more ads… exactly what everyone wants on their sites :fearful:


#8

Hello area49,

You’re right that API now is required if you want to embed the map into your website’s code. Also, Google has started a new policy since July 16, 2018 - if you want to create a google maps API account now you need to give your credit card details and if you reach the limit of views you will be charged for your map, for more information you can check the article about it on https://nearplace.com/blog/how-to-fix-action-needed-yourdomain-requires-google-maps-platform-account/.

Embedding Google Maps with API is really useful but also not the easiest thing so if you gonna have some troubles there are many guides about it, like https://nearplace.com/blog/how-to-add-multiple-markers-on-google-maps/.

Cheers,
Amy from Nearplace


#9

this still works


#10

Why not use Bing, MapQuest or some other mapping service?