adding sound to an array of markers - google map javascript

Question

I am new here so I know I don't have any credibility. I am an artist and new to programming so I understand if no one will take this on. I am posting this on the off chance that this is an easy question. -S

This is the code (mostly from the google developer site) to create multiple markers. It works fine and creates a custom icon for each marker. Each marker should play a different audio file when clicked (right now only the last marker created does). I would also like to change the icon when the audio file is playing. I am using javascript and sound manager 2 to play the audio - but what i am interested in is: how do i reference each marker in the array so that i can play the specific audio file assigned to that specific marker?

I am hoping i csn do this without XML and a database. -Sabine

Here is the relevant code:

  setMarkers(map, beaches);
}


var beaches = [
  ['Devotion', 40.710431,-73.948432, 0],
 ['Tester', 40.711223,-73.958416, 1],
];

function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('biker.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(32, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32)
      );

 var newimage = new google.maps.MarkerImage('biker_click.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(32, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32)
      );

var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
   type: 'poly'
  };

  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3],

    });
  }



function markerClick() {
    console.log('click');
  }
  google.maps.event.addListener(marker, 'click', markerClick);

function markerClick() {
  var playing = sm2.toggle('http://mm1.ellieirons.com/wp-content/uploads/2012/03/beeps_bubbles.mp3', true);
  if (playing) {
    this.setIcon(newimage);
  } else {
    this.setIcon(image);
  }
}

Answer 1

Suppose you have an array of URLs:

var sounds = ["http://mm1.ellieirons.com/wp-content/uploads/2012/03/beeps_bubbles.mp3",
              "http://mm1.ellieirons.com/wp-content/uploads/2012/03/beeps_bubbles2.mp3"];

Then you could try something like this:

 for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
       position: myLatLng,
       map: map,
       icon: image,
       shape: shape,
       title: beach[0],
       zIndex: beach[3]
    });
    marker.sound = sounds[i];  //Storing associated sound in marker
    google.maps.event.addListener(marker, 'click', markerClick);
 }

And modify the handler to this:

function markerClick() {
   var playing = sm2.toggle(this.sound, true);
   if (playing) {
       this.setIcon(newimage);
   } else {
       this.setIcon(image);
   }
}

Answer 2

Something like this..

var beaches = [
 ['Devotion', 40.710431,-73.948432, 0, 'sound1.mp3'],
 ['Tester', 40.711223,-73.958416, 1, 'sound2.mp3'],
];

// ...

  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3],

    });
    google.maps.event.addListener(marker, 'click', function() {
       playSound(beach[4]);
    });
  }

Because you define an anonymous function inside your loop, it has access to the loop's variables (it is a "closure"). You add the name of your sound to the data associated with the beaches, then pass it from the closure to the function (I call it playSound) which actually causes it to play.

Hope this helps, it's not a complete recipe.