Issue Embedding Mapkit Map

Design help Custom code
1

Hi, I’m trying to embed this map into my website:
https://api.mapkit.io/oembed/mlxkF3

All I get is an error message when I publish or just nothing at all. I’ve tried:

  1. Pasting all of the code on an embed element
  2. Pasting only the script and the div element onto the embed and paste the links src on the head of the page and of the general site settings
  3. Pasting it as an iframe
    All based on this article: Custom code | Webflow University

It seems to work ok if I look at it on codepen, but why can’t I make it work on webflow??

TAKE A LOOK AT THE CODE: https://codepen.io/andmaillard/pen/BWmjdv

2

Did you place the code in the footer of the custom code section ?

This code will not work in Preview Mode. You need to Publish or Export the site in order to see it run.

3

I published the site and nothing.

4

whats the url for the published site

5

http://www.casadeaire.com/location

6

it looks like you embedding html directly into the form.

815×574 126 KB

Try this:

Remove the html embed from the form.
Make sure you have a DIV there with the ID as locations-map

Go the custom code section of your page… and add the code
where it says “before </body> tag”

935×859 50.3 KB

Also… it likes you have two maps ? They need to be different ID’s.

7

Thanks, this didn’t work either… I pasted the script and style on the
page’s Before tag and added a div with the id locations-map but
nothing still…

8

well… I could take a look at your code.

  • It would need to provide a Read-Only Share Link for your Project.

This would allow me to see the internals of the website.

You also would need to make sure the custom code is on the page (Pages->Page Details)

  • and NOT at the Project Level
  • SINCE sharing only provides access to the Designer… not the Dashboard.

And there’s two other issues:

Because the issue is with Custom Code…

  • I cannot Publish the site in order to test it
  • you will get limited support from Webflow

Tell me what you want to do.

9

hey guys… some help here.

@samliew if you have some time.

@waldo @PixelGeek

10

@andmaillard
I’m getting a Google API Invalid Key error.

Do you have a valid key ?

Also - you didn’t put the LINK HREF into the Custom Footer did you ?

11

@andmaillard I will tell you what is the problem when you unminify your code. Currently it is a mess

view-source:http://www.casadeaire.com/location

Turn these two off, save, and republish.

12

Sure, here is the link: https://preview.webflow.com/preview/casa-de-aire?preview=26c0e29d351fdee9f154303c9fe29fc9

13

Link not working? lets try this: https://preview.webflow.com/preview/casa-de-aire?preview=b550ee64890e82559794492786eadd42

14

Hi @andmaillard!

I just recently did my first webflow + mapkit integration (links below) and a lot of the issues I ran into were actually on the webkit end. Specifically,

  1. Make sure you save your map
  2. Anytime you update the map in webkit, the API key goes away so keep that key handy on your clipboard!
  3. Making major changes to the map once I got it on the webflow site and then (repasting the code) didn’t work. I have no idea why. Instead, I ended up getting the map at least functional in webflow, and then making changes to the zoom, scroll, etc. directly in the custom code on webflow.

All of my code is in the “custom code” part of the project settings, after the tag. I didn’t need any foot code.

Webflow site: Webflow - Melissa and Jonathan

Live site (direct to section featuring the map): http://melissaandjonathangetmarried.com/#details

Hope this helps!

1 Like
15

Thanks @LauraH! I’ll try that now, see if by placing the code on the project settings and just the div into the page works. I’ll let you know!

16

Weird thing happened:

It works on the webflow domain: http://casa-de-aire.webflow.io/location but not on the custom domain: http://casadeaire.com/location