This approach gives you complete design control but involves several technical steps.<\/p>\n\n\n\n
Step 1: Get Your Google Maps API Key<\/p>\n\n\n\n
This is the essential first step that requires a Google Cloud account.<\/p>\n\n\n\n
1. Go to the Google Cloud Console: <\/strong>Navigate to https:\/\/console.cloud.google.com\/<\/a>.<\/p>\n\n\n\n Proper API key restriction is crucial for security<\/strong><\/p>\n\n\n\n Step 2: Add Map Container to Your Squarespace Page<\/p>\n\n\n\n Create a placeholder for your custom map.<\/p>\n\n\n\n html<\/strong><\/p>\n\n\n Step 3: Add Custom Code via Header Injection<\/p>\n\n\n\n Inject the JavaScript and CSS through Squarespace’s code injection.<\/p>\n\n\n\n html<\/strong><\/p>\n\n\n This creates a professional-looking map with custom styling, detailed info windows, and automatic bounds adjustment.<\/p>\n\n\n\n The Challenges of This Advanced Method<\/strong><\/p>\n\n\n\n While this approach works, it presents significant challenges:<\/p>\n\n\n\n The Simple, Professional Solution: MapsFun.com<\/a><\/strong><\/p>\n\n\n\n Why deal with API keys, code injection, and maintenance headaches when there’s a better way?<\/p>\n\n\n![\"\"](\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-30-1024x534.png\")
<\/figure>\n\n\n\n\n
\n
\n
![\"\"](\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-31-1024x718.png\")
<\/figure>\n\n\n\n\n
<div<\/span> class<\/span>=\"custom-squarespace-map\"<\/span>><\/span>\n <h2<\/span>><\/span>Our Locations<\/h2<\/span>><\/span>\n <div<\/span> id<\/span>=\"multi-location-map\"<\/span>><\/span><\/div<\/span>><\/span>\n <p<\/span> class<\/span>=\"map-note\"<\/span>><\/span>Click on markers for more information<\/p<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n\n
<style<\/span>><\/span>\n \/* Custom map styling *\/<\/span>\n #multi-location-map<\/span> {\n height<\/span>: 480px<\/span>;\n width<\/span>: 100%<\/span>;\n border-radius<\/span>: 12px<\/span>;\n margin<\/span>: 25px<\/span> 0<\/span>;\n box-shadow<\/span>: 0<\/span> 4px<\/span> 12px<\/span> rgba<\/span>(0<\/span>,0<\/span>,0<\/span>,0.1<\/span>);\n border<\/span>: 1px<\/span> solid #ddd<\/span>;\n }\n .custom-squarespace-map<\/span> h2<\/span> {\n text-align<\/span>: center;\n margin-bottom<\/span>: 10px<\/span>;\n }\n .map-note<\/span> {\n text-align<\/span>: center;\n color<\/span>: #666<\/span>;\n font-size<\/span>: 14px<\/span>;\n margin-top<\/span>: 10px<\/span>;\n }\n<\/span><\/style<\/span>><\/span>\n\n<script<\/span>><\/span>\ndocument<\/span>.addEventListener('DOMContentLoaded'<\/span>, function<\/span>(<\/span>) <\/span>{\n if<\/span> (document<\/span>.getElementById('multi-location-map'<\/span>)) {\n function<\/span> initCustomMap<\/span>(<\/span>) <\/span>{\n \/\/ Business locations data<\/span>\n const<\/span> businessLocations = [\n {\n name<\/span>: 'Main Office'<\/span>,\n lat<\/span>: 40.7128<\/span>,\n lng<\/span>: -74.0060<\/span>,\n address<\/span>: '123 Business Ave, New York, NY'<\/span>,\n phone<\/span>: '(555) 123-4567'<\/span>\n },\n {\n name<\/span>: 'Downtown Store'<\/span>,\n lat<\/span>: 40.7074<\/span>,\n lng<\/span>: -74.0113<\/span>,\n address<\/span>: '456 Commerce St, New York, NY'<\/span>,\n phone<\/span>: '(555) 123-4568'<\/span>\n },\n {\n name<\/span>: 'Westside Warehouse'<\/span>,\n lat<\/span>: 40.7211<\/span>,\n lng<\/span>: -74.0005<\/span>,\n address<\/span>: '789 Industrial Blvd, New York, NY'<\/span>,\n phone<\/span>: '(555) 123-4569'<\/span>\n }\n ];\n\n \/\/ Initialize map<\/span>\n const<\/span> map = new<\/span> google.maps.Map(document<\/span>.getElementById('multi-location-map'<\/span>), {\n zoom<\/span>: 11<\/span>,\n center<\/span>: { lat<\/span>: 40.7128<\/span>, lng<\/span>: -74.0060<\/span> },\n styles<\/span>: [\n {\n \"featureType\"<\/span>: \"all\"<\/span>,\n \"elementType\"<\/span>: \"geometry\"<\/span>,\n \"stylers\"<\/span>: [{\"color\"<\/span>: \"#f5f5f5\"<\/span>}]\n },\n {\n \"featureType\"<\/span>: \"water\"<\/span>,\n \"elementType\"<\/span>: \"geometry\"<\/span>,\n \"stylers\"<\/span>: [{\"color\"<\/span>: \"#c5d6f3\"<\/span>}]\n }\n ] \/\/ Custom color scheme<\/span>\n });\n\n \/\/ Create info window<\/span>\n const<\/span> infoWindow = new<\/span> google.maps.InfoWindow();\n \n \/\/ Add markers with custom styling<\/span>\n businessLocations.forEach((location, index<\/span>) =><\/span> {\n const<\/span> marker = new<\/span> google.maps.Marker({\n position<\/span>: { lat<\/span>: location.lat, lng<\/span>: location.lng },\n map<\/span>: map,\n title<\/span>: location.name,\n animation<\/span>: google.maps.Animation.DROP\n });\n\n \/\/ Custom info window content<\/span>\n marker.addListener('click'<\/span>, () => {\n infoWindow.setContent(`\n <div class=\"map-info-window\">\n <h4>${location.name}<\/span><\/h4>\n <p>${location.address}<\/span><\/p>\n <p>\ud83d\udcde ${location.phone}<\/span><\/p>\n <a href=\"https:\/\/maps.google.com\/?q=${location.address}<\/span>\" \n target=\"_blank\" \n style=\"color: #2d5be3; text-decoration: none;\">\n Get Directions \u2192\n <\/a>\n <\/div>\n `<\/span>);\n infoWindow.open(map, marker);\n });\n });\n\n \/\/ Auto-fit map to show all markers<\/span>\n const<\/span> bounds = new<\/span> google.maps.LatLngBounds();\n businessLocations.forEach(location<\/span> =><\/span> {\n bounds.extend(new<\/span> google.maps.LatLng(location.lat, location.lng));\n });\n map.fitBounds(bounds);\n }\n\n \/\/ Load Google Maps API<\/span>\n const<\/span> googleMapScript = document<\/span>.createElement('script'<\/span>);\n googleMapScript.src = `https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&callback=initCustomMap`<\/span>;\n googleMapScript.async = true<\/span>;\n googleMapScript.defer = true<\/span>;\n document<\/span>.head.appendChild(googleMapScript);\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