title: adding sound to an array of markers - google map javascript
body: <p>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</p>
  
  <p>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?</p>
  
  <p>I am hoping i csn do this without XML and a database.
  -Sabine</p>
  
  <p>Here is the relevant code:</p>
  
  <pre><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 &lt; 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);
    }
  }
  </code></pre>