Google Map with multiple svg icons and infowindows

Question

I have a functioning GoogleMap working nicely with SVG icons as markers. What I am now stuck on is how I assign infowindows to each location.

I have been trawling through multiple guides on adding info windows and I can do this easily with a fresh new map and using stock standard markers however whenever I try to incorporate it into the working map with SVG icons, it breaks one or the other.

Just hoping someone can give me some advice on where to start with getting individual infowindows for each of my markers.

My working SVG marker code is:

var map,
desktopScreen = Modernizr.mq( "only screen and (min-width:1024px)" ),
zoom = desktopScreen ? 14 : 13,
scrollable = draggable = !Modernizr.hiddenscroll || desktopScreen,
isIE11 = !!(navigator.userAgent.match(/Trident/) && navigator.userAgent.match(/rv[ :]11/));

function initMap() {
    var myLatLng = {lat: -38.1632438, lng: 145.9190148};
    map = new google.maps.Map(document.getElementById('map-locator'), {
        zoom: zoom,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: scrollable,
        draggable: draggable,
        styles: [{"stylers": [{ "saturation": -100 }]}],
    });

    var locations = [
        {
            title: 'Shopping - Aldi',
            position: {lat: -38.1626302, lng: 145.9247379},
            icon: {
                url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
                scaledSize: new google.maps.Size(64, 64)
            }
        },
        {
            title: 'Shopping - Woolworths',
            position: {lat: -38.160115, lng: 145.9283567},
            icon: {
                url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
                scaledSize: new google.maps.Size(64, 64)
            }
        },
        {
            title: 'Source Address',
            position: {lat: -38.159946, lng: 145.902425},
            icon: {
                url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Arrow_1.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Arrow_1.svg",
                scaledSize: new google.maps.Size(96, 96)
            }
        }                   
    ];

    locations.forEach( function( element, index ){  
        var marker = new google.maps.Marker({
            position: element.position,
            map: map,
            title: element.title,
            icon: element.icon,
        });
    }); 
}

Answer 1

1. Add a click listener to the markers.
2. open the infowindow when the marker is clicked.

var infow = new google.maps.InfoWindow();
locations.forEach(function(element, index) {
  var marker = new google.maps.Marker({
    position: element.position,
    map: map,
    title: element.title,
    icon: element.icon,
  });
  marker.addListener('click', function(evt) {
   infow.setContent(element.title);
   infow.open(map,marker);
  })
});

proof of concept fiddle

code snippet:

var isIE11 = false;
var zoom = 14;

function initMap() {
  var myLatLng = {
    lat: -38.1632438,
    lng: 145.9190148
  };
  map = new google.maps.Map(document.getElementById('map-locator'), {
    zoom: zoom,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      "stylers": [{
        "saturation": -100
      }]
    }],
  });
  var infow = new google.maps.InfoWindow();
  locations.forEach(function(element, index) {
    var marker = new google.maps.Marker({
      position: element.position,
      map: map,
      title: element.title,
      icon: element.icon,
    });
    marker.addListener('click', function(evt) {
      infow.setContent(element.title);
      infow.open(map, marker);
    })
  });
}
google.maps.event.addDomListener(window, "load", initMap);
  var locations = [{
    title: 'Shopping - Aldi',
    position: {
      lat: -38.1626302,
      lng: 145.9247379
    },
    icon: {
      url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
      scaledSize: new google.maps.Size(64, 64)
    }
  }, {
    title: 'Shopping - Woolworths',
    position: {
      lat: -38.160115,
      lng: 145.9283567
    },
    icon: {
      url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
      scaledSize: new google.maps.Size(64, 64)
    }
  }, {
    title: 'Source Address',
    position: {
      lat: -38.159946,
      lng: 145.902425
    },
    icon: {
      url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Arrow_1.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Arrow_1.svg",
      scaledSize: new google.maps.Size(96, 96)
    }
  }];

html,
body,
#map-locator {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-locator"></div>