javascript - Google map marker click function issue -
i building interactive map google. have lot of map markers when clicked open bootstrap modal content relative location. possible have 1 modal call in script, load content relative marker clicked? thinking write remote html file of different modal contents. right now, have write click function each marker (painstaking), open unique modal.
1 modal, 1 click function relative marker clicked, unique modal contents loaded depending on marker clicked. can 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; (i = 0; < 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 portion of script i'm having write in order tell each marker open respective modal. see how have write click event each index of array. don't know other way...
try put marker in array , in addlisterner function pass array item , index generate sequential call modal :
var arrayformodal = []; (i = 0; < 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)}); });
Comments
Post a Comment