Streaming live at 10am (PST)

Adding Google Maps API (JS, HTML, CSS) to Webflow


#1

Hi,

I’m trying to add this google maps JsFiddle http://jsfiddle.net/eugensunic/7TZFP/5/ to my webflow page.

I have created a section with ID “map”, and added the script (wrapped in ) in the page’s custom code before tag but it’s not working.

I would appreciate it if someone could tell me exactly where to put the code or what I’m doing wrong.

Thanks for the help!


#2

Hi @dddanny

Does it work when you publish the site? Custom code/embeds won’t show in the Designer or Preview mode - only published…

Also, if you can provide your share link, some helpful code ninjas can take a closer look :slightly_smiling_face:
(Project settings - Share link - above the tabs).


#3

Hi @StuM,

thanks for your reply. I have published the site, but all I see is a big blank space.

Thanks!


#4

Hi @dddanny

Can you share the preview link too - see attached for the location of the button.

Also - any joy if you add it into an ‘embed’ element on the page rather than page settings?


#5

Hi @StuM,

Do you mean only adding the script to the embed element? Or also the html?


#6

The Google Maps API script isn’t referenced, and is not loaded on your site before you call the maps.


#7

Hi @samliew, I have added the API key to the integrations settings. Do I also need to include it somewhere else?


#8

@dddanny

If you are using custom JS to load Google maps, you can’t use Webflow’s GMaps API key field.

If you look at the jsfiddle, there is an external script loaded in the resources list which you need to include on your site as well.


#9

@samliew I have appended <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> to the page script. Is this correct?


#10

You’ll need to insert your key into the script URL, instructions https://developers.google.com/maps/documentation/javascript/tutorial


#11

Thanks @samliew It’s working :smiley:

I added an HTML Embed in the map section, and added the following to request multiple libraries <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places"> </script> (with my API key).