Search the Community
Showing results for tags 'map'.
-
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://millnerproperty.com.au Hi, The inbuilt default map by squarespace is not suitable for what we're trying to achieve, so we built a custom html page with google api to display a custom google map with custom pins and multiple pins with cards. https://fluffyduck.com.au/millner/maps.html The issue - I can't find any information where / how to embed this into the site where required. If I choose 'code + html' it says 'script disabled' when it tries to load the google elements If I choose 'code + javascript' it simply displays all the html elements/portions If I choose 'embed' and put the above url in place, it attempts to parse it and just displays NULL - Hopefully I'm over looking something very simply here and hoping someone can assist. Thanking everyone in advance -
Is it possible to add multiple locations on a map? Thanks
-
Hello. Wondering if anyone can advise on embedding a mapbox map with multiple locations into a squarespace website. Ive copied the coding as recommended but it does not seem to work? Thanks, S.
-
Is there a way I can manually add a google map into my site?
zala posted a question in Coding and Customization
Site URL: https://www.downtoearthadventures.com/ Hi, I added a google map to this site specifically so people could see the reviews that have been left on google maps. I added an Embed block and messed with the URL until it showed the correct business on the map (there are others with a similar name) When I checked back a few weeks later, I realized that the site had now linked to the wrong business somehow! I don't want to use the maps block because I need it to include the 5 star rating with link to reviews the way using the embed block does, but now when I insert the URL it directs to a totally different business (with a similar name). Any way for me to bypass the blocks and just manually add the map via CSS? Or anyone have any other ideas? Thanks! Site: Downtoearthadventures.com What I want to link: https://goo.gl/maps/JfyfmYcd3PhQhNux9 -
Hi all, Is there any way of increasing the height of the map block on mobile only? It's currently so skinny even though the height is proportionally larger on desktop. I have tried these bits of CSS code without luck though I'm likely targeting the wrong object. @media only screen and (max-width: 767px) { .sqs-block-map{ height: 200px !important; } } https://projectsinsider.com/project/3-rubida-court-endeavour-hills lifeisgood Thanks! -
Hey guys! Quick question. Is it possible to set a website up so that when you sign up to the site (and give it your location) . your display picture appears on the main map on the homepage?
-
Site URL: https://tohora.squarespace.com Hi I am trying to insert a GPS tracking on one of the page. How do I do this? The idea is to have an evolutive map depending of the location. Cheers Marie
-
Site URL: https://www.mesaplazalaundromat.com/ Hi there, I'm having trouble figuring out how to put a square size map block next to an image block with no space in between. I'm going to make the image block a color, so the edges of the map and the image block have to match up perfectly and both full-bleed to the edges of the site. All the code I find is to make a split-screen with an image card, but nothing with the map. Pleasee help! Password to site is "Peanuts"
-
Site URL: https://rangerclub.uk We are looking to embed ideally a custom Google map with multiple pinned locations within a single layer. This is easily done but uses JavaScript / iframe which isn't in our Square Space plan. Are there any other viable options? Google Maps does allow exporting to KML/KMZ.
-
Site URL: https://travelfullthrottle.squarespace.com/config/ Hi folks! I've generated a clickable map through https://imagemapper.pageballoon.com/#/ and swapped in my image source. The image appears on my page and when I hover over a linked area, my mouse changes, and I can see in the bottom corner of my page where the link will take me. However, I cannot actually click and be taken to a page. *Update: I can right-click 'open in new tab' but still cannot just click on the dang thing. I've tried entering it as a Code Block and as an Embed Block. Both provide the same outcome. My site is: https://travelfullthrottle.squarespace.com/config/ and the password is throttle. Any chance for some guidance? Thanks!
-
Hi, I use a contact form for clients to contact me for a photobooth rental. I sometimes have trouble locating the venue they are mentioning due to the typos. I am looking to change my contact form in order to include a Google-Maps address entry. I have looked through the tutorials and reached out to the customer service and this isn't possible as a standard module, they therefore advised me to post here and I haven't found any similar requests. I found the API on Google developer website, but I'm not sure how to integrate that in the contact form and get the data. https://developers.google.com/maps/documentation/javascript/places-autocomplete Thanks Mike
-
map How to set a different size for a google map on mobile SQSP7.1
Xbal posted a question in Coding and Customization
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://www.levelupcompanies.com/collocation-opportunities Site URL: https://www.levelupcompanies.com/collocation-opportunities I have added a code for an interactive map that I used the embed code from Awesome Tables website. But, when someone clicks on the page it doesn't show map until you refresh the browser. Is there a way to get it to work without refreshing the browser?
-
Sorry if this is a stupid question but I couldn't find an answer anywhere. I'm setting up a website and I'm experimenting with a Google map with Javascript. I know that I need a Business plan or higher in order for Javascript to run on the public site, but I'm wondering if that's also required for it to run on the private demo (obviously can't share a link)? The initial setup page said that I could build the site with the features I needed and then purchase whatever plan allowed for everything I'd included, so that makes me think the script should work in the preview. I just want to know whether my code isn't showing up because of a problem with the code or because I don't have a Business plan yet. (I'm creating it for a client and I don't want to have him purchase the plan until I know for sure that we need it, and I don't know if this is how I'll ultimately end up doing the map or not.) -
My company has a reservation site where customers can choose which of our locations they would like to reserve a spot at. From there, they would be able to reserve a time and date at that location and pay for our digital package. How can I incorporate this on my site?
-
- 1
-
-
- scheduling
- calendar
- (and 3 more)
-
Site URL: https://transform.squarespace.com I've tried adding the following code to my CSS, but that doesn't seem to work: html, body { overflow-x: hidden; } To be clear, I just want the MAP block to be full-screen, nothing else. Is there a way to make this happen? Here's my staging site URL and PW: https://transform.squarespace.com/ pw - transform Thanks in advance,
-
Is it possible to add an interactive map?
JacquelineMarie88 posted a question in Coding and Customization
I am building a new website for my company - an international wine importer and distributor. We want to include a list of the wineries we work with and thought it would be cool to map each winery. I'd like to have a beautiful map of certain countries in Europe (more like an outline than something like google maps) and have each of the wineries mapped to their location. When you hover over each icon or whatever, I'd like to have something pop up and embed a link to their website in it. I was thinking maybe I could just find the type of map I want and include it as a photo then build the interactive elements on top of it? I have access to the Adobe Creative Suite as well so I could do portions in that. If you can't already tell, I have no idea what I am doing. I am a quick learner though and if I could just find some tutorials or resources, I feel like I could figure out how to do it. I don't even know what to look for though and I'm not sure if this is something that is possible in squarespace. So can this be done? If so, any resources or information you could provide would be greatly appreciated. Thank you!! Jackie -
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! -
Site URL: https://www.michaelwolkdesign.com/ Hello , I would like my map to display the location pin on the left side of my floating form. When I set the display and use code to freeze it - it jumps back to being centered (under the form). Does anyone have css code for it to stay exactly how I want it to display? Thank you!
-
Site URL: https://www.betterbasics.org/book-nook I used custom code to upload a google map to a webpage. How do I center the map? It is shifting to the left margin. Thank you,
-
Site URL: https://www.prescribinglife.com/thubs I am attempting to include a custom Google map via Google Maps Javascript API. My code block (containing my HTML code) works in Save Preview Mode. However, when viewing the live page (https://www.prescribinglife.com/thubs) there is no map. Any ideas what I am doing wrong? Could it be a DIV height / width size issue? Thanks in advance for any help on this issue. Here is the code in my code block: <!DOCTYPE html> <html> <head> <title>Simple Map LER</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <style type="text/css"> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> <script> let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } </script> </head> <body> <div id="map" style="width:100%; height:100%"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3ywKcIzCvF9etVLjmV4eirtvltibvi_k&callback=initMap&libraries=&v=weekly" async ></script> </body> </html> -
Site URL: https://www.tuscanvillagesalem.com/directory Hello! Do anyone know if there is a way to add a directly map in squarespace? Similar to this one https://www.natickmall.com/en/directory/map/store/atms or https://www.premiumoutlets.com/outlet/merrimack/map/#/location/swarovski
-
Site URL: https://designdistrict.fi/fi/kartta/?filter=all Hi! I got an offer request from a potential client who want's to have this kind of map on her site. At this point I'm trying to search information about how this can be done and how much work it requires? I could then create an offer based on that knowledge. Thanks for advance!
-
Site URL: https://gold-clover-k2yg.squarespace.com https://gold-clover-k2yg.squarespace.com password: hello I am trying to make a section to look like the photo attached. The map should be on the right but should be full bleed with no padding to the right, bottom, or top. There should be a colored background text section on the left.
