Jump to content

Need help with Mapbox Code in Squarespace!

Go to solution Solved by Guest,

Recommended Posts

Site URL: https://radish-gold-7356.squarespace.com/config/pages

Hi all,

I am currently using the trial of Squarespace

I don't know much at all about coding, and am trying to use a Mapbox map in squarespace. I have the API, and the other elements needed. The code that I have, when inserted separately into a coding website (such as jsfiddle or codepen) renders just fine, but when I try to put it all together in HTML (so inject the Java and CSS) on Squarespace, I get the "script disabled" error.

Maybe there's a problem with my coding? Or perhaps with how I 'm trying to insert it. Below is some code, if you could help that would be appreciated. Many thanks.

<head>

<script src='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js'></script> 

 <link href='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css'/>

<style>

body { margin: 0; padding: 0; }

#map { position: absolute; top: 0; bottom: 0; width: 100%; }

</style>

</head>

<body>

<div id="map"></div>

<script>  //or use style

mapboxgl.accessToken = 'pk.eyJ1IjoieWFoeWFpYiIsImEiOiJja3RuMG9nMW0yMGt4MnBvNnYxcGhqc2drIn0.wa5pADZsWXW3FhKdaTJz7A';

const map = new mapboxgl.Map({

  container: 'map', // container ID

  style: 'mapbox://styles/yahyaib/cktn2gd1e39v618jyllttb4cm', // style URL

  center: [-0.039,51.494], // starting position [lng, lat]

  zoom: 12// starting zoom

});

</script>      //or use style

 </body>

 

 

 

Link to comment
  • Replies 7
  • Views 873
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Ok this code actually works! The only problem is, it's tiny as anything. Confusion arose because the map didn't load until a while after I saved the page and then viewed it.

Anyhow, hope this helps anyone trying to embed code into Squarespace.

Link to comment

Hi Tuanphan, 

Yes, it would be helpful, since the risizing I carried out myself (adding height: 200px) gave the map an awkward size.

Furthermore, I can't zoom or scroll on the map with that code, which is annoying 

 

Thanks!

 

Link to comment
On 9/21/2021 at 5:55 PM, YahyaB said:

Hi Tuanphan, 

Yes, it would be helpful, since the risizing I carried out myself (adding height: 200px) gave the map an awkward size.

Furthermore, I can't zoom or scroll on the map with that code, which is annoying 

 

Thanks!

 

Hi,

Your site is private. Can you setup password & share url again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
14 hours ago, tuanphan said:

Hi,

Your site is private. Can you setup password & share url again?

Hi,

Ah, we might have a problem. My website currently isn't published yet, is there an option to make it accessible to others? Thanks!

Link to comment
On 9/24/2021 at 11:55 PM, YahyaB said:

Hi,

Ah, we might have a problem. My website currently isn't published yet, is there an option to make it accessible to others? Thanks!

Hi,

You can setup password & share url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/27/2021 at 3:55 AM, tuanphan said:

Hi,

You can setup password & share url

Hi,

Thanks, I can see how this can be enabled! However unfortunately I have decided not to use the map after all so will not need to resize.

Thank you however for your time, and apologies for any inconvenience caused 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.