Streaming live at 10am (PST)

Issue Embedding Mapkit Map


#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: https://help.webflow.com/lesson/custom-code

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.

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"

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: https://preview.webflow.com/preview/melissaandjonathan?preview=355ab00ca7d569de2229a22b74e8fd2a

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

Hope this helps!


#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