Search the Community

Site URL: https://bluebird-kangaroo-dwz5.squarespace.com/tasting-rooms Hello! I have a Snazzy Maps with a Google API that I've embedded in a Code Block here. (password: Cows) Snazzy Maps has a new plugin here that is meant to populate a dialogue box with every marker on the map. For some reason, I can't get these to sync. Are they just incompatible? Do I need to insert code into a different area? Help me pleaseeeee. Thanks in advance!

We're looking to develop an interactive map using MapKit JS then embedding it in an existing site. Has anyone done this or, more generally, is it possible? My worry is that the token/authentication portion isn't going to work. Thoughts?

Hey guys, this is Armin I'm the newest member of Circle. I just had trouble making smooth transition from regular conversations to offering my service or sale. Just wondering how you guys do it? That doesn't look awkward and out of place. For example you message a store owner and talking about their business and I ask them do you have a website? And when they say "No" I don't know how to offer my services the way that doesn't make the Conversations drown or awkward. Any help would be greatly appreciated 🙏

Site URL: https://www.lagoonout.com/location Hello everyone, does anyone know how to make a split layout with a map on one side and content on the other like the one shown here: AWAYN – AI Driven Lifestyle And Travel Guide For Immersive, Interactive And Local Adventures Notice when you scroll through the content on the left side of the page, it moves the map (on the right) to the respective location. It even connects it with a line. If anyone can help me out, I'd really appreciate it. Thank you.

So, I want to add a map like this one: https://www.childrensplayvillage.co.uk/play-areas/ labelled 'village map' whereby people can click on different areas of my premises which takes them to another page telling them about that particular area. Thanks very much for any help!

Hi everyone, www.squarewebsites.org/products/advanced-map-block Just wondered if anyone had used this plugin before? I am thinking of getting it for a client site, but need to know if it is possible for the markers on the map to have a link to another page in the site? I have messaged them, but they haven't come back to me and hoped someone had some experience of it on here! Thank you advance!

Site URL: https://www.freedomfocusbirth.com/zoom I am trying to url map the link WWW.FreedomFocusBirth.com/zoom to my external Zoom meeting link. Anyone have a clue? For example see WWW.theautonomymommy.com/zoom

Hi, Can you anyone help, if it's possible to have some feature, like the below on a squarespace website? if yes can you please advise on how it can be don. I do not have a URL to share as i have not started working on the site, but trying to figure out the best platform to use.

Site URL: https://www.shacksonracks.com/test How can I go about resizing the Squarespace content box to allow the full map to display? This was made with the Mapbox API, so it's all code that draws interactive data from a Google Doc. There is no embed code with positioning to customize. There is some positioning code (below) that I've tried changing around and while it does change the placement of the map on my editor, changes don't affect its positioning on the Squarespace page which makes me think there has to be an edit made to the size of the Squarespace content box to allow the full map to display. #map { position: absolute; top: 0; bottom: 0; width: 100%; }

Site URL: https://forthegood.org/mapbox-test Hello: We are a nonprofit organization that has recently begun learning Mapbox in order to create a clickable map that shows the locations of our programs and new schools in rural Kenya. We have created a basic map and successfully embedded it into a Code block in Squarespace with iFrames using the code Mapbox provided- you can view that page here. We now hope to add interactivity to the map so that when you click on the location of a school, you see a pop up that shares the name of the school and a description and link to another extended page of information. Mapbox provides an excellent tutorial on this: https://docs.mapbox.com/help/tutorials/add-points-pt-3/. We are now working to understand how to 1: Place our own Kenyan Schools Map Style into the code to replace the Chicago map example & 2: Embed this code into the map page on our Squarespace site. The process we used for our original map without Pop-ups - i.e.-embedding via the iFrames- will not support the Javascript, so it is necessary to embed the complete code. When we insert the code provided by Mapbox's "Chicago Parks" example into a Code block on our test page, we don't see anything. We are able to successfully embed it into the Page Header Code Injection under the "Settings" > "Advanced" > "Page Header Code Injection", but then we see it in the Header and Footer section (see attached screenshot) instead of in a Code block in the body section where we want it. The code that we used, provided by Mapbox for this example, is below my signature. We'd be so grateful to anyone who has experience with successfully embedding an interactive map from Mapbox into a specific page on their Squarespace site and would be willing to share the exact steps here. We are photojournalists and designers, well familiar with Squarespace but only slightly familiar with HTML and Javascript- though always eager to learn. Thanks so very much! Kind regards Kate MAPBOX CODE- CHICAGO MAPS POP UP POINTS EXAMPLE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Demo: Add points to a web map</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> mapboxgl.accessToken = 'pk.eyJ1Ijoia2F0ZWJsYWNrIiwiYSI6ImNrcjVyenZwazFiY3kyd3BkM2IxdmlubzYifQ.ocj6I03cHMQdA_rLB9GRqw'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/examples/cjgiiz9ck002j2ss5zur1vjji', center: [-87.661557, 41.893748], zoom: 10.7 }); map.on('click', (event) => { const features = map.queryRenderedFeatures(event.point, { layers: ['chicago-parks'] }); if (!features.length) { return; } const feature = features[0]; const popup = new mapboxgl.Popup({ offset: [0, -15] }) .setLngLat(feature.geometry.coordinates) .setHTML( `<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>` ) .addTo(map); }); </script> </body> </html>

Hi Everyone, I'm using the advanced map block plugin and my map markers are linked to the collection item of a blog post. However, I don't want the markers to be able to link of / click through to the actual blog post. Is there a way to disable this so you're unable to click through to the blog post when a marker is clicked on? Greatly appreciate your help!

Site URL: https://www.lo-slo.co.uk/stockists SO, we have a good 'problem' to solve. Our stockists page is growing and we want the page to be more tidy - 'user friendly', and frankly beautiful. We've see some other example that we like including THIS vendor who shows the logo's of their stockists. Open to ideas and inspiration, so thought I'd post. HELP 🙂

Hey! Sorry if this has been answered elsewhere, I did a search and couldn't see anything. I've created a map for my client via Snazzy maps (he needed something with a lot of location markers so the normal map widget wouldn't suffice). He's now asked if it is possible for the users GPS location to be displayed on the map when someone is on the page. I assume it's not possible as there's no option in snazzy maps itself. But wonder if there's a way around that as it's basically taking google maps and adding a skin to it. Cheers, Ian

Site URL: https://www.smartcompost.nyc/ Hello! I'm using a custom Google Map on my website via the embed data block (iframe). It's sized appropriately for desktop, but when viewed on Mobile, the map extends far beyond the rest of the website, forcing users to pinch and zoom out (per screenshots below). I'm decidedly a novice coder, but is there a simple function I'm missing to have this resized for mobile responsively? I've tried using a script tag outside of the iframe to resize it with no success. Any help would be greatly appreciated, and thanks in advance! xx

Site URL: https://www.centerforpubliclands.org/ I'm trying to redirect this link: https://www.centerforpubliclands.org/project-list/taylor-park-group to this project page: https://www.centerforpubliclands.org/projects-add/taylor-park We have the first link written in some government documents that won't be changed for a long time. The latter page is a project page, so maybe that has something to do with why it's not working.

Site URL: https://www.stelviopartners.com I have placed a Google map in a footer with the right size, but in the mobile view the height shrinks so much that the map is useless. So I am searching for a solution to change the height only for mobile. I have implemented this personalized code from Tuan Phan,@tuanphan but unfortunately, it doesn't work: @media screen and (max-width:640px) { #yui_3_17_2_1_1622210185104_922 .image-inset { padding-bottom: 60% !important; } } I have done quite some research but seems that not many have this same problem. Any kind of hint would be greatly appreciated. Cheers,🤩 Cris

Site URL: https://imagineinternet.net/signup I want to create a dynamic address lookup feature for my squarespace site! I can't figure this out...!!! I want the customer to be able to see if we provide service to their address. I like how the example provided autopopulates an address that they service in the dropdown: https://imagineinternet.net/signup If we don't provide it (to a database of addresses I can fill in in the backend), then I want them to be able to request service at their address. Would really appreciate any suggestions, thank you very much!

Site URL: https://ferret-bird-3rl2.squarespace.com I have to complete this one-page site by Friday. (I'm a first timer, and client getting impatient.) 1. I am able to delete the white space around the map on the desktop, but it is still showing on mobile. Tried to transfer the same coding with the media query, but can't seem to make it work. (see photo) 2. All of the sudden the site is too wide on both desktop and mobile. There's a horizontal scroll! Absolutely lost on this one. (see photo) And my hands are tied by client creatively ("plain, boring, no color pop..."), so if you have any design tips, I'll take 'em. Thanks for any and all help! site: https://ferret-bird-3rl2.squarespace.com pw: blahblahblah

Site URL: https://hillaryjordan.com/TOUR I'm doing mostly virtual events these days, but I can't seem to get rid of the map in the location section. And deleting the location doesn't seem to be an option in design-->site styles in v. 7.0. My events are held all over the country, so I would also like to add a P.S.T., C.S.T. etc after the event time instead of having to put a separate line in the copy. If anyone could help I'd be grateful!

Site URL: https://www.powerlitefitz.co.uk/contact/ Would this sort of map be possible on Squarespace. Our business is deciding if we should move to squarespace however we need this MAP SVG contact page. The person that made this custom map has now left so we don't have an inhouse expert so any help would be appreciated. thanks

First time using Squarespace as an experienced web dev. Is there just no way to nest multiple folders within each other? Can one folder only hold pages and that's it? If so, that's really disappointing and limiting. Not to mention more difficult to maintain and visualize. I haven't had any luck searching the internet. Basically I'm looking for something like this.

Site URL: https://www.happygolisa.com/ Hi Anna, Do you mind me asking what app.plugin you use to generate the code for your interactive map? it looks great. Thanks,Lisa

Site URL: https://cbcbellevue.com Hello! I have an idea in mind and I'm not sure if it is possible but wanted to ask the experts and see if they had any ideas. I just bought a plug in for the map on my page so that it can feature multiple locations tagged in different areas sourcing from a blog/events list etc... Each location can then have a pop up of the excerpt that has the location listed (from the blog selected) and my idea is for the map to be black and white/grayscale (already can do that) and then when someone clicks the marker on the location the story pops up, and that city turns gold/lights up. This would only (possibly) work for this because I will have one featured story per city and would want the whole city to "light up". Below is the plug in code I had to put in the footer injection and the page I am building my test map on. Let me know if there is any possibility of making this idea come to life! Map Code Injection: <script src="https://assets.squarewebsites.org/sqs-map-utils/init.min.js"></script> <script> !function(){window.self!==window.top&&function(e,t,s){if(!s.querySelector("#"+t)){var i=document.createElement("script");i.src=e+"?cache="+((new Date).getTime()+"").substr(0,7),i.id=t,s.appendChild(i)}}("https://assets.squarewebsites.org/sqs-map-utils/map-utils-admin.min.js","map-utils-admin",window.top.document.getElementsByTagName("head")[0])}(); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> page url: https://cbcbellevue.com/mock-christmas-2020

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>

Site URL: https://skiinstructordiaries.com I'd love to be able to have a heat style map on my website showing where my readers are from. It would be ideal if I could use the analytics geography one to show where everyone is from. Any ideas of how to do this ?