Jump to content

Need help with Mapbox Code in Squarespace!

By Guest, in Customize with code

Go to solution Solved by Guest,

Recommended Posts

Guest

Guest

Posted
Posted

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 854
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

  • Solution
Guest

Guest

Posted
  • Solution
Posted

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
Guest

Guest

Posted
Posted

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
tuanphan Level 17

tuanphan

Posted
Posted
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
Guest

Guest

Posted
Posted
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
tuanphan Level 17

tuanphan

Posted
Posted
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
Guest

Guest

Posted
Posted
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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources