Google map marker click function issue

Question

I am building an interactive map with google. I will have a lot of map markers that when clicked will open a bootstrap modal with content relative to that location. Is it possible to just have 1 modal call in the script, then load it with the content relative to the marker clicked? I was thinking I could write a remote html file with all of the different modal contents. But right now, I have to write a click function for each marker (painstaking), to open a unique modal.

1 modal, 1 click function relative to the marker clicked, unique modal contents loaded depending on marker clicked. Can this be done?

   function initialize() {
  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],
     ['Lake',43.897239,-78.6594789],
     ['Rowe',43.72277,-80.378554],
     ['Westport',43.649826,-79.6599653],
     ['Vinefresh',42.9556009,-81.6699305]
    ];  

var marker2, i;

for (i = 0; i < commerciallocations.length; i++) {  
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(commerciallocations[i][1], commerciallocations[i][2]),
    map: map,
    icon:'images/commercialmapicon.png'
    });

if (i == [0]){  
    google.maps.event.addListener(marker, 'click', function() {
    $('#modal0').modal();
    });
    }
if (i == [1]){  
    google.maps.event.addListener(marker, 'click', function() {
    $('#modal1').modal();
    });
    }
if (i == [2]){  
    google.maps.event.addListener(marker, 'click', function() {
    $('#modal2').modal();
    });
    }
if (i == [3]){  
    google.maps.event.addListener(marker, 'click', function() {
    $('#modal3').modal();
    });
    }
if (i == [4]){  
    google.maps.event.addListener(marker, 'click', function() {
    $('#modal4').modal();
    });
    }

    };

I added the portion of the script I'm having to write in order to tell each marker to open its respective modal. See how I have to write a click event for each index of the array. I don't know any other way...

Answer 1

try with put the marker in an array and then in the addListerner function pass the array item and the index for generate a sequential call to modal like :

var arrayForModal = [];
for (i = 0; i < commerciallocations.length; i++) {  
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(commerciallocations[i][1], commerciallocations[i][2]),
map: map,
icon:'images/commercialmapicon.png'
k = arrayForModal.push(marker); 
addListenersOnPolygon(arrayForModal[k-1], 'click', function(k)  { $(('#modal' + (k-1)).modal)});
});

Answer 2

Thanks for your help guys. It definitely helped my train of thought, I deconstructed a few other functions I discovered on SO and I managed to write the click function properly.

I added the ID of each Modal into the index of each location in the array (attached the id to the marker). I then created a variable to identify the index value. Then I simply called the index with the ID value depending on which marker was clicked within the for loop.

    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: map,
        icon:'images/commercialmapicon.png',
        title: place[0],
        popup: place[3]
    });
        markers.push(marker);           

        google.maps.event.addListener(marker, 'click', function() {
        $(this.popup).modal();
        });