Trying to get a google map embedded into blog post

Design help CMS
1

I am trying to get an existing map to display in a CMS collection in Webflow. I did get the error messages to display individually with two different attempts on that particular blog post. Thank you for any help.

I tried using the Google Maps embed code, but Webflow rejected the iframe code and wanted a standard weblink starting with http. I deleted all but the http from the code and got this error: “Google Maps Platform rejected your request. Invalid request. Unexpected parameter ‘ehbc’”

The second error came from trying the actual browser URL of the map: “Google Maps Platform rejected your request. Invalid request. Unexpected parameter ‘ll’” I wanted the map to display in the blog post.

Also, this map was created by someone else (if that makes a difference), but I don’t think I’m getting a permissions error.

Share link: Webflow - MapShare

Thank you for any help in advance, Jon

Here is my public share link: Webflow - MapShare
(how to access public share link)

2

Pro Tip: When you share a readonly link, it encodes the page and cms item you are looking at in the designer, which helps a lot for getting assistance.

But digging a bit I was able to find an example of what you’re trying to do on your London item page.

Here’s the custom code embed I think you’re using;

image
image801×614 17.4 KB

Main issues-

  • The URL is invalid, it has line breaks, which will usually translate as whitespace
  • Your Key is not delimited with an &
  • Embedding your map URL likely won’t work either this way, when you embed CMS fields like this, Webflow HTML-encodes them- it does not URL-encode them.

Options-

  1. Store the full embed URL in the CMS, from the https:// all the way to the key.
  2. Store the whole embed IFRAME in the CMS, inside of a Rich Text element, containing an HTML Embed subelement.

#1 is generally preferred because it gives you complete control over the IFRAME construction and sizing in the designer, while giving you complete control over the map content at the CMS item level.

3

Thank you for your suggestions. I apologize for the late response. I got slammed with another project.

Thanks for the tip on the specific page and CMS item on the share link.

I took the line breaks out of the code, and as a non coder, I can’t figure out what you mean about the key not delimited with an &.

I tried storing MapShare Biking in and around Lake Norman State Park, North Carolina - Google My Maps and get this error: Google Maps Platform rejected your request. Invalid request. Unexpected parameter ‘usp’. Maybe I’m not able to find the URL that includes the key.

What I am ultimately trying to do, is have someone use the “Submit A Map” link in the navigation, which is a form, to submit a map they have created in google maps. Even if there has to be some editing in the blog post after it has been submitted. Like I have done with the London entry.

Thanks again for any help. Jon

4

To display an existing map in a Webflow CMS collection, try generating an iframe embed code from Google Maps (using their “Share” or “Embed” feature) and ensure that you use the full iframe code provided without removing any parts, including “https,” to avoid the “Unexpected parameter” error, and make sure you have the necessary permissions to use the map and location features.