MAP with multiple locations

BDG · May 28

Hey all!

I would like to add a map showing the locations of the multiple offices as the example, is it possible to do within squarespace?

tuanphan · May 29

Yes. Possible. But click on each location will show a popup with more info, or show nothing?

lottydotty · June 17

@tuanphanWere you able to help @BDG with this? I'd also love to know the answer to this one. We're trying to show multiple locations of testing facilities for a client with locations throughout Wisconsin. I tried using Folio to create a map with the intention of embedding it within a Squarespace site, but that didn't quite work as planned. (The Code embed seemed to mess with other parts of the site.)

If you'd like to take a look, I've attached a PNG image the map I created showing one of the hovered-over pins. Right now it only has 8 locations, but the number will increase over time. I'd love your thoughts!

Here's the code that was used, too.

<!DOCTYPE html>
<html>
<head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>
    
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_7044ac96c09d919a5be7aa74b740915a {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;                
                }
                
                
                .leaflet-fade-anim .leaflet-popup {
	                opacity: 0;
	                -webkit-transition: opacity 0.2s linear;
	                -moz-transition: opacity 0.2s linear;
	                transition: opacity 0.2s linear;
	                width: 200px !important;
	            }

            </style>
        
</head>
<body>
    
    
            <div class="folium-map" id="map_7044ac96c09d919a5be7aa74b740915a" ></div>
        
</body>
<script>
    
    
            var map_7044ac96c09d919a5be7aa74b740915a = L.map(
                "map_7044ac96c09d919a5be7aa74b740915a",
                {
                    center: [44.5, -89.5],
                    crs: L.CRS.EPSG3857,
                    zoom: 7,
                    zoomControl: true,
                    preferCanvas: false,
                }
            );

            

        
    
            var tile_layer_cdf85b000aab66eb9cd901a7d4e90898 = L.tileLayer(
                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                {"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
            var marker_12fa991856d1b4ca8bdb906d0d147daf = L.marker(
                [43.0086369, -88.232888],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_a659c22b580cef00e9a73de70a848e8c = L.popup({"maxWidth": "100%"});

        
            var html_664e62df8fb5f7cee5ea08dcab729ac0 = $(`<div id="html_664e62df8fb5f7cee5ea08dcab729ac0" style="width: 100.0%; height: 100.0%;"><b>Waukesha Public Library</b><br>321 Wisconsin Ave, Waukesha, WI 53186<br>Bruce Gay, Director Kerry Pinkner, Public Services Mgr.</div>`)[0];
            popup_a659c22b580cef00e9a73de70a848e8c.setContent(html_664e62df8fb5f7cee5ea08dcab729ac0);
        

        marker_12fa991856d1b4ca8bdb906d0d147daf.bindPopup(popup_a659c22b580cef00e9a73de70a848e8c)
        ;

        
    
    
            marker_12fa991856d1b4ca8bdb906d0d147daf.bindTooltip(
                `<div>
                     Waukesha Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_047db3fe965142544927b91283fe531a = L.marker(
                [45.4073486, -92.6445145],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_d02789cb41bd5de3eca5c55f8c6864a4 = L.popup({"maxWidth": "100%"});

        
            var html_adb018ace440e02b90a4eb1f4be3ac67 = $(`<div id="html_adb018ace440e02b90a4eb1f4be3ac67" style="width: 100.0%; height: 100.0%;"><b>St. Croix Falls Public Library</b><br>230 S Washington St, St Croix Falls, WI 54024<br>Su Leslie, Director</div>`)[0];
            popup_d02789cb41bd5de3eca5c55f8c6864a4.setContent(html_adb018ace440e02b90a4eb1f4be3ac67);
        

        marker_047db3fe965142544927b91283fe531a.bindPopup(popup_d02789cb41bd5de3eca5c55f8c6864a4)
        ;

        
    
    
            marker_047db3fe965142544927b91283fe531a.bindTooltip(
                `<div>
                     St. Croix Falls Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_ad93a483355048651d705183e73fc2ce = L.marker(
                [42.5594662, -87.8532093],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_90c7de1b945ae89c58b6bbc18459cceb = L.popup({"maxWidth": "100%"});

        
            var html_e17df3008b2e59fde59f141d8b598bc8 = $(`<div id="html_e17df3008b2e59fde59f141d8b598bc8" style="width: 100.0%; height: 100.0%;"><b>Kenosha Public Library</b><br>7979 38th Avenue, Kenosha, WI 53142<br>Barbara Brattin, Director & Sys. Director</div>`)[0];
            popup_90c7de1b945ae89c58b6bbc18459cceb.setContent(html_e17df3008b2e59fde59f141d8b598bc8);
        

        marker_ad93a483355048651d705183e73fc2ce.bindPopup(popup_90c7de1b945ae89c58b6bbc18459cceb)
        ;

        
    
    
            marker_ad93a483355048651d705183e73fc2ce.bindTooltip(
                `<div>
                     Kenosha Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_9bcd271393cc29d918e2e26940d6828d = L.marker(
                [43.9512716, -88.0958913],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_f8313b5564346e56b18357f7d19a1115 = L.popup({"maxWidth": "100%"});

        
            var html_517c653490bb3c7641d5caf08ab5012f = $(`<div id="html_517c653490bb3c7641d5caf08ab5012f" style="width: 100.0%; height: 100.0%;"><b>New Holstein Public Library</b><br>2115 Washington St, New Holstein, WI 53061<br>D Hankins, Director</div>`)[0];
            popup_f8313b5564346e56b18357f7d19a1115.setContent(html_517c653490bb3c7641d5caf08ab5012f);
        

        marker_9bcd271393cc29d918e2e26940d6828d.bindPopup(popup_f8313b5564346e56b18357f7d19a1115)
        ;

        
    
    
            marker_9bcd271393cc29d918e2e26940d6828d.bindTooltip(
                `<div>
                     New Holstein Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_c66e9ef648ba444a8f3418bb0625803f = L.marker(
                [44.5147024, -88.0101867],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_989e0c6fa57f7292aa73b01cec614226 = L.popup({"maxWidth": "100%"});

        
            var html_183ec80040979797c04609373e372f3e = $(`<div id="html_183ec80040979797c04609373e372f3e" style="width: 100.0%; height: 100.0%;"><b>Brown County Library</b><br>515 Pine Street, Green Bay, Green Bay, WI 54301<br>Danielle Zeamer, Library Associate Sarah Sugden, Executive Director</div>`)[0];
            popup_989e0c6fa57f7292aa73b01cec614226.setContent(html_183ec80040979797c04609373e372f3e);
        

        marker_c66e9ef648ba444a8f3418bb0625803f.bindPopup(popup_989e0c6fa57f7292aa73b01cec614226)
        ;

        
    
    
            marker_c66e9ef648ba444a8f3418bb0625803f.bindTooltip(
                `<div>
                     Brown County Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_dacd66c28bc1aa91a5fd890591668590 = L.marker(
                [44.260082, -88.3637684],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_4c65c8b85895da6df148d67f949be223 = L.popup({"maxWidth": "100%"});

        
            var html_8f0420b4652798653ee654ab03d2d204 = $(`<div id="html_8f0420b4652798653ee654ab03d2d204" style="width: 100.0%; height: 100.0%;"><b>Appleton Public Library</b><br>3000 E. College Avenue, Appleton, WI 54915<br>Tasha Saeker, Assistant Director Colleen Rortvedt, Director</div>`)[0];
            popup_4c65c8b85895da6df148d67f949be223.setContent(html_8f0420b4652798653ee654ab03d2d204);
        

        marker_dacd66c28bc1aa91a5fd890591668590.bindPopup(popup_4c65c8b85895da6df148d67f949be223)
        ;

        
    
    
            marker_dacd66c28bc1aa91a5fd890591668590.bindTooltip(
                `<div>
                     Appleton Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_04b8dcbd93e590f504f7ea47650ec27e = L.marker(
                [43.0136017, -89.288265],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_065f16f1a136b82d75f3a49448213e85 = L.popup({"maxWidth": "100%"});

        
            var html_5a4297b2918064dcc34257460e04a7fc = $(`<div id="html_5a4297b2918064dcc34257460e04a7fc" style="width: 100.0%; height: 100.0%;"><b>E.D. Locke Public Library</b><br>5920 Milwaukee St., McFarland, WI 53558<br>Heidi Cox, Director</div>`)[0];
            popup_065f16f1a136b82d75f3a49448213e85.setContent(html_5a4297b2918064dcc34257460e04a7fc);
        

        marker_04b8dcbd93e590f504f7ea47650ec27e.bindPopup(popup_065f16f1a136b82d75f3a49448213e85)
        ;

        
    
    
            marker_04b8dcbd93e590f504f7ea47650ec27e.bindTooltip(
                `<div>
                     E.D. Locke Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_7df97020dd0cde9a2ae41f05e2df55ff = L.marker(
                [43.847378, -88.8392248],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_9434448774c29579e864d74b3d368369 = L.popup({"maxWidth": "100%"});

        
            var html_f2527ac103c937d092004b1270c82369 = $(`<div id="html_f2527ac103c937d092004b1270c82369" style="width: 100.0%; height: 100.0%;"><b>Ripon Public Library</b><br>120 Jefferson St, Ripon, WI 54971<br>Susie Menk, Adult & Teen Services Lib.</div>`)[0];
            popup_9434448774c29579e864d74b3d368369.setContent(html_f2527ac103c937d092004b1270c82369);
        

        marker_7df97020dd0cde9a2ae41f05e2df55ff.bindPopup(popup_9434448774c29579e864d74b3d368369)
        ;

        
    
    
            marker_7df97020dd0cde9a2ae41f05e2df55ff.bindTooltip(
                `<div>
                     Ripon Public Library
                 </div>`,
                {"sticky": true}
            );
        
</script>
</html>

Giving_Machine · August 28

I too would like to know how to do this for multiple locations.

@lottydotty Did your code work? Did you figure this out?

creedon · August 28

On 6/17/2024 at 4:53 AM, lottydotty said:

I tried using Folio to create a map with the intention of embedding it within a Squarespace site, but that didn't quite work as planned. (The Code embed seemed to mess with other parts of the site.)

The first issue is that the document you are embedding is a full HTML page. An HTML page within an HTML will cause issues. There can only be one HTML document and Squarespace has already generated it.

MAP with multiple locations

Recommended Posts

BDG

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

Link to comment

lottydotty

Link to comment

Giving_Machine

Link to comment

creedon

Link to comment

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources