Mapbox on Ghost

I added Mapbox to a Ghost post but it blows up the whole editor. I can get the map on the post but nothing else.

Website Link

Anybody have similar issues or solutions to Mapbox integration with Ghost. Could I add an iframe, then the HTML markup?

I’ll keep trying to fix it but if anybody has already done it please let me know?

Taking a quick glance at your post, it looks like the CSS for your map is overriding everything (specifically the #map {} stuff… Because of the way mapbox works, it’s going to be hard to give you specific advice, since the width and height of the map are computed on page load

https://github.com/iliyaj/mapbox

I’ve added the link to the Mapbox HTML code that I inserted directly into the post. It’s taken directly from their website and I have just substituted the overlay.

I think if I add an iframe, I can solve some of the issues that are presenting in Ghost as it will isolate the code in the iframe.

Hello Ilya, Mapbox embedded maps and Ghost is working fine for me.

I think the code you’re linking to is more or less straight from the Mapbox examples collection. Just pasting that into the post won’t work. There are instruction in the Mapbox documentation (“embed your map”), but they’re not well advertised and kind of hard to find, it took me a good while to get it right also. Do like this:

You add your code to your post starting from the div id='map'></div> part and all the way down to </script> .Important: you have to give the dimensions for the div like “height: 200, width: 100%” or you will get nothing.

Then you add the following part (only) to the code injection, either at the post or whole site level:

<script src='https://api.mapbox.com/mapbox.js/v3.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.1/mapbox.css' rel='stylesheet' />

that should be it.

1 Like

Thank you that worked :slight_smile: , I found that the iframe method worked as well. I published the mapbox code on Github pages and than I just linked that page in a an iframe. That method is good if you want to keep track of your mapbox code changes.

https://jokic.co/iframe-test/

The code injection in the Site header is the simpler method. I will use it. Thanks.

Also if anybody wants some simple Mapbox html to insert into their website. Here is the link