Click function for map marker syntax
I'm writing a script to call a unique bootstrap modal depending on which map marker is clicked on a google map. I can't get the modal to launch within my click event of the for loop. If I write a click event for each marker independently it works fine, but I don't want to write 50 click events... I know its how I'm writing the click event thats the problem, I just don't know how to write it properly.
- var map;
- var mapOptions = {
- zoom: 8,
- center: new google.maps.LatLng(43.819201,-79.535474),
- disableUi: true
- };
- map = new google.maps.Map(document.getElementById('map-canvas'),
- mapOptions);
-
- var commerciallocations = [
- ['Regan',43.703264,-79.804144,'#modal0'],
- ['Lake',43.897239,-78.6594789, '#modal1'],
- ['Rowe',43.72277,-80.378554, '#modal2'],
- ['Westport',43.649826,-79.6599653, '#modal3'],
- ['Vinefresh',42.9556009,-81.6699305, '#modal4'],
- ['Winery', 42.1209449,-82.9707676, '#modal5']
- ];
-
- var markers =[];
- for (var i = 0; i < commerciallocations.length; i++) {
- var place = commerciallocations[i];
- var marker = new google.maps.Marker({
- position: new google.maps.LatLng(commerciallocations[i][1], commerciallocations[i[2]),
- map: null,
- icon:'images/commercialmapicon.png',
- title: place[0]
- });
- markers.push(marker);
-
- google.maps.event.addListener(marker, 'click', function() {
- place[5].modal('show');
- });
-
- }
-
- function toggleLayer() {
- for (var i = 0; i < markers.length; i++) {
- if (markers[i].getMap() === null) {
- markers[i].setMap(map);
- } else {
- markers[i].setMap(null);
- }
- }
- }