Question

I’m trying to write a function, that gives a lat & long, a name and a picture as formal parameters, so a marker on the map will display when clicked: the name and picture.
It seems to work, though when I add multiple Markers, the actual parameters of the last call are passed to all. And so every Marker I click, will pop up the same name and picture.

I have no clue what I’m doing wrong here, cause I thought that I scoped everything right.

here is some part of my code
in my Initialise() function, I declared the following:

var marker = add_marker(51.21904,4.32659000000001,"Iggy Jensen","bro.jpg"); 
fluster.addMarker(marker);

var marker = add_marker(51.20367,4.341480000000047,"John Doe","bro.jpg");
fluster.addMarker(marker);

var marker = add_marker(51.2041539954234,4.327017528991746,"Joske Vermeulen","bro.jpg"); 
fluster.addMarker(marker);

The function add_marker is written by myself addMarker is a part of Fluster2 a cluster management system that I use.

function add_marker(lat,lng,name,pic) {

var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lng),
      map: map,
      icon: 'icon.png',
      title: name
});
    infoBubble = new InfoBubble({
      maxWidth: 300,
      backgroundColor: '#dedddd',
      borderWidth: 2,
      borderColor: 'rgb(68, 68, 68)'
    });

    var contentString = '<div id="content">'+
        '<h2>'+name+'</h2>'+
        '<p><span class="myLabel" style="margin-right:10px">Age </span>21</p>'+
        '<p><center><img src="'+pic+'" class="bro_image"></center> </p>'+
        '</div>';

    var div = document.createElement('DIV');
    div.innerHTML = 'No pictures uploaded by this user.';

    infoBubble.addTab('Personal', contentString);
    infoBubble.addTab('Pictures', div);

    google.maps.event.addListener(marker, 'click', function() {
      if (!infoBubble.isOpen()) {
        infoBubble.open(map, marker);
      }
    }); 

return marker;
  }

   function addTab() {
    var title = document.getElementById('tab-title').value;
    var content = document.getElementById('tab-content').value;

    if (title != '' && content != '') {
      infoBubble.addTab(title, content);
    }
  }

Any help is appreciated! Thanks in advance!

Answer 1

Just add ‘var‘ before infoBubble definition, otherwise everytime you are assigning a new InfoBubble object to the same global variable:

  var infoBubble = new InfoBubble({
// ^---------here it is