How to: Google Map with multiple custom markers and info boxes for use on Squarespace
 

If the following information is helpful please follow LakeTahoe on Facebook! Thank you.

 
 
 
 

Original icon made by SimpleIcon from www.flaticon.com is licensed by CC 3.0 BY and updated by LakeTahoe.com (Creative Commons required author acknowledgement).
The standard map size icon is 32x32 pixels. Depending on your map zoom level you may choose to make them larger. We have made our map icons 40x40 pixels.


CODE DISCLAIMER:
The following code is provided AS IS and no claim is made to its functionally or compatibility with squarespace.
This is a solution that worked for this site but there may be different and better solutions.

YOU WILL NEED TO GET YOUR OWN GOOGLE MAP API.

There are three components to the map.
It is ESSENTIAL that the map name is the same in all three code box insertions.

CODE BOX 1: This is the code that inserts the map box.
CODE BOX 2: This the style code for the box. You can change the size of the box. 
CODE BOX 3: This is how the map looks, the info box contents and the marker locations/type.

for complete documentation on Google Maps refer here - https://developers.google.com/maps/documentation/javascript/

**** NOTE: Sometimes when you copy and paste the ' changes to a ‘.

WRONG

WRONG

CORRECT - IF correct the map name will show red in code box.

CORRECT - IF correct the map name will show red in code box.


1. CODE BOX 1: INSERT THE FOLLOWING CODE

<div id="yourmapname"></div>


2. CODE BOX 2: INSERT THE FOLLOWING CODE

<style>
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}
#yourmapname {
    height: 500px;
    width: 100%;
}
a {
    text-decoration: none;
}
</style>


3. CODE BOX 3: INSERT THE FOLLOWING CODE (changed to suit your marker needs)

<script>
  function initMap() {

        var locations = [

['<strong>1. Frog Lake, Winnemucca & Round Top</strong><br>\South Lake Tahoe<br>\
<a href="https://goo.gl/maps/FK152HLpGK32" target="_blank">Get Directions</a>', 38.694428, -119.988725, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c428b7440243602d3fedaf/1489250624886/?format=100w"],
          
['<strong>2. Spooner Lake Loop</strong><br>\Glenbrook<br>\
<a href="https://goo.gl/maps/2D2TDe3NhR52" target="_blank">Get Directions</a>', 39.103261, -119.914045, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c431349de4bb5b7f44866e/1489252671687/?format=100w"],
          
['<strong>3. Eagle Falls Trail</strong><br>\South Lake Tahoe<br>\
<a href="https://goo.gl/maps/vsqV5nvAR1L2" target="_blank">Get Directions</a>', 38.951905, -120.112013, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c431453e00be4228a807a8/1489252681217/?format=100w"],         

['<strong>4. Stateline Fire Lookout Trail</strong><br>\North Lake Tahoe<br>\
<a href="https://goo.gl/maps/GkBHEiEWtMo"  target="_blank">Get Directions</a>',  39.229333, -120.006657, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c43152be659451377fe87e/1489252695140/?format=100w"],

['<strong>5. Tahoe Meadows Trail </strong><br>\North Lake Tahoe<br>\
<a href="https://https://goo.gl/maps/v8fGTbeLT3n"  target="_blank">Get Directions</a>', 39.301685, -119.918659, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c43165d2b8573ccae87c0a/1489252712688/?format=100w"],

['<strong>6. Loch Leven Lakes Trail </strong><br>\North Lake Tahoe<br>\
<a href="https://goo.gl/maps/m6TVejENicv" target="_blank">Get Directions</a>', 39.287811, -120.505239, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c43178725e25606faa81b3/1489252733610/?format=100w"],
          
['<strong>7. Margaret Lake Trail </strong><br>\South Lake Tahoe <br>\
<a href="https://goo.gl/maps/r4c6vshBuPs" target="_blank">Get Directions</a>', 38.703011,  -120.070846, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c43187cd0f68690ff62293/1489252746233/?format=100w"],
          
['<strong>8. Shirley Lake  Trail </strong><br>\West Shore Lake Tahoe <br>\
<a href="https://goo.gl/maps/8yB8iqNQ6Ln" target="_blank">Get Directions</a>', 39.198562, -120.241322, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c431931b631bea2c325f7f/1489252759766/?format=100w"],

['<strong>9. Donner Lake Rim Trail </strong><br>\Truckee<br>\
<a href="https://goo.gl/maps/kUQRivzBQes" target="_blank">Get Directions</a>', 39.324885, -120.232821, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c431a2e6f2e1378fbf1568/1489252773090/?format=100w"],        

['<strong>10. Lam Watah Trail</strong><br>\ Glenbrook<br>\
<a href="https://goo.gl/maps/y4hyLPr518A2">Get Directions</a>', 38.970911, -119.936677, "https://static1.squarespace.com/static/58408e3df5e2318c94d9d42b/t/58c4328db3db2b34ddfc4780/1489253015482/?format=100w"],

    ];

    var map = new google.maps.Map(document.getElementById('template-map'), {
        zoom: 9,
        center: new google.maps.LatLng(39.001069, -120.002794),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow({});

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            icon: locations[i][3],
            map: map


        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}
</script> 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=INSERTYOURGOOGLEAPIHERE=initMap"></script>