Advanced Map Block

Plugins Store

Squarespace plugins that are powerful, beautiful and easy to install. We offer quick users help and support. Create amazing websites simply.

Advanced Map Block

Advanced Map Block

from 35.00

Use Squarespace Map Block with Custom Markers and show Multiple Locations on maps with your Custom Styles.

Add To Cart
Check Reviews

Use Squarespace Map Block with Custom Markers and show Multiple Locations on maps with your Custom Styles. 

Sites already using:

After purchasing you will get the code you need to insert into Header or Footer Injection Tab. We will send you code in 24 hours after purchasing. Notice that Advanced Map Block plugin requires Sitewide Code Injection, a premium feature available only on Squarespace "Commerce" and "Business" plans. 

One Site License

  • An additional copy is required for each website.

  • Your copy of plugin will be paired to the built-in "" domain you specify when you order. (It'll work with your third-party/primary domain too, of course).

Multiple Sites License

  • You will get a code working on any Squarespace site, unlimited number of sites. You will still see a form requesting site urs from you during purchase, but you may type there ANYTHING.

OK, so how to get multiple locations on Map? First of all, you need to have Gallery or Blog or Events Collection. This Collection need to be Enabled in page Settings (if you do not want it appear in search results you may add <meta name="robots" content="noindex, no-follow"> tag to it's page injection). Next you need create the items you need in that collection and fill each item Location Tab. Next you're creating Map Block, check the Use Collection Locations checkbox and select the source collection. In my case, I've created USA Sights Collection, added some and fill with some Falls and Parks. Bottom filtered Map Block use this Collection as a source.

You may add your own styles for maps. Notice you may set styles array but need to start value from 11 (so next style will be with value: 11), because built-in Squarespace styles take 1-6 range plus 7-10 built-in custom styles. Here is an example:

    label:"Gamma Dark",
    value: 11,

You may customize and enhance map as you want - you have google map instance on .custom-map-block node object in _map variable. You also have map.currentInfoWindow object, ._mapBound, ._markers  array and ._filterMarkers function to filter markers.

Let's use this and build map, where we use light marker image by default, but set the dark icon image for markers with Park category.  For this let's inject our custom new map style and set catsMarkers object. After applying this style to map we will see new light markers icons for category  Park.

  window.customMapStyles = [
            label: "Snazzy Maps Style with Categories Markers",
            value: 11,
            styles: {
                catsMarkers: { "Park": { imgUrl: "/universal/images-v6/icons/cover-pages-map-marker-pin-dark-2x.png", naturalWidth: 48, naturalHeight: 64 } },
                marker: { imgUrl: "/universal/images-v6/icons/cover-pages-map-marker-pin-light-2x.png", naturalWidth: 48, naturalHeight: 64 },
                colors: [{ featureType: "water", elementType: "geometry", stylers: [{ color: "#333739" }] }, { featureType: "landscape", elementType: "geometry", stylers: [{ color: "#2ecc71" }] }, { featureType: "poi", stylers: [{ color: "#2ecc71" }, { lightness: -7 }] }, { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#2ecc71" }, { lightness: -28 }] }, { featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#2ecc71" }, { visibility: "on" }, { lightness: -15 }] }, { featureType: "road.local", elementType: "geometry", stylers: [{ color: "#2ecc71" }, { lightness: -18 }] }, { elementType: "labels.text.fill", stylers: [{ color: "#ffffff" }] }, { elementType: "labels.text.stroke", stylers: [{ visibility: "off" }] }, { featureType: "transit", elementType: "geometry", stylers: [{ color: "#2ecc71" }, { lightness: -34 }] }, { featureType: "administrative", elementType: "geometry", stylers: [{ visibility: "on" }, { color: "#333739" }, { weight: .8 }] }, { featureType: "poi.park", stylers: [{ color: "#2ecc71" }] }, { featureType: "road", elementType: "geometry.stroke", stylers: [{ color: "#333739" }, { weight: .3 }, { lightness: 10 }] }]

Next, we want to filter markers on all maps on page. And the easiest way is to use our Universal Filter for this



Show Reviews
20 4.77