Method 1: The Manual Google Maps API & Code Injection Method<\/strong><\/p>\n\n\n\n This approach gives you complete design control but involves several technical steps.<\/p>\n\n\n\n Step 1: Set Up Your Google Maps API Key<\/p>\n\n\n\n This is the most critical prerequisite<\/p>\n\n\n\n Enabling the Maps JavaScript API is a mandatory first step.<\/strong><\/p>\n\n\n\n Step 2: Add a Map Container to Your Squarespace Page<\/p>\n\n\n\n You’ll need a simple element on your page to hold the map.<\/p>\n\n\n\n html<\/strong><\/p>\n\n\n Step 3: Inject the JavaScript and CSS via Site Header<\/p>\n\n\n\n This is where you bring the map to life using Squarespace’s Code Injection feature.<\/p>\n\n\n\n html<\/strong><\/p>\n\n\n This code creates a fully responsive, multi-marker map with custom styling and detailed info windows that appear when clicked.<\/p>\n\n\n\n The Significant Challenges of This Method<\/strong><\/p>\n\n\n\n While powerful, this DIY approach presents major hurdles for most Squarespace users:<\/p>\n\n\n\n The Simple, Professional Alternative: MapsFun.com<\/a><\/strong><\/p>\n\n\n\n Why navigate the complex landscape of API keys and code injection when you can achieve a superior result in minutes?<\/p>\n\n\n\n
![\"\"](\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-28-1024x534.png\")
<\/figure>\n\n\n\n\n
\n
![\"\"](\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-29.png\")
<\/figure>\n\n\n\n\n
<!-- Custom Google Map Container --><\/span>\n<div<\/span> class<\/span>=\"custom-map-container\"<\/span>><\/span>\n <h3<\/span>><\/span>Visit Our Locations<\/h3<\/span>><\/span>\n <div<\/span> id<\/span>=\"squarespace-custom-map\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n\n
<style<\/span>><\/span>\n \/* CSS for the map container *\/<\/span>\n #squarespace-custom-map<\/span> {\n height<\/span>: 500px<\/span>;\n width<\/span>: 100%<\/span>;\n border-radius<\/span>: 8px<\/span>;\n margin<\/span>: 20px<\/span> 0<\/span>;\n border<\/span>: 1px<\/span> solid #e5e5e5<\/span>;\n }\n<\/span><\/style<\/span>><\/span>\n\n<script<\/span>><\/span>\n\/\/ Wait for the page to load<\/span>\nwindow<\/span>.addEventListener('DOMContentLoaded'<\/span>, (event) => {\n \/\/ Only run if our map container exists on the page<\/span>\n if<\/span> (document<\/span>.getElementById('squarespace-custom-map'<\/span>)) {\n function<\/span> initMap<\/span>(<\/span>) <\/span>{\n \/\/ Define your locations: [Title, Lat, Lng, Description]<\/span>\n const<\/span> locations = [\n ['Main Office'<\/span>, 40.7128<\/span>, -74.0060<\/span>, 'Our flagship location in downtown NYC'<\/span>],\n ['Support Center'<\/span>, 40.7074<\/span>, -74.0113<\/span>, 'Customer service and returns'<\/span>],\n ['Warehouse'<\/span>, 40.7211<\/span>, -74.0005<\/span>, 'Distribution and logistics hub'<\/span>]\n ];\n\n \/\/ Create the map<\/span>\n const<\/span> map = new<\/span> google.maps.Map(document<\/span>.getElementById('squarespace-custom-map'<\/span>), {\n zoom<\/span>: 12<\/span>,\n center<\/span>: { lat<\/span>: 40.7128<\/span>, lng<\/span>: -74.0060<\/span> },\n styles<\/span>: [\n {\n \"featureType\"<\/span>: \"all\"<\/span>,\n \"stylers\"<\/span>: [{\"saturation\"<\/span>: -50<\/span>}]\n }\n ] \/\/ Optional custom styling<\/span>\n });\n\n \/\/ Create an info window<\/span>\n const<\/span> infowindow = new<\/span> google.maps.InfoWindow();\n\n \/\/ Add markers to the map<\/span>\n locations.forEach(([title, lat, lng, description]<\/span>) =><\/span> {\n const<\/span> marker = new<\/span> google.maps.Marker({\n position<\/span>: { lat, lng },\n map<\/span>: map,\n title<\/span>: title,\n \/\/ icon: '\/your-custom-marker.png' \/\/ Optional custom icon<\/span>\n });\n\n \/\/ Add click listener for info window<\/span>\n marker.addListener('click'<\/span>, () => {\n infowindow.setContent(`\n <div style=\"padding: 12px; max-width: 200px;\">\n <h4 style=\"margin: 0 0 8px 0;\">${title}<\/span><\/h4>\n <p style=\"margin: 0; color: #666;\">${description}<\/span><\/p>\n <\/div>\n `<\/span>);\n infowindow.open(map, marker);\n });\n });\n }\n\n \/\/ Load the Google Maps API<\/span>\n const<\/span> script = document<\/span>.createElement('script'<\/span>);\n script.src = `https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&callback=initMap`<\/span>;\n script.async = true<\/span>;\n script.defer = true<\/span>;\n document<\/span>.head.appendChild(script);\n }\n});\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n\n