title: Array of markers with a link for each marker in Google Earth
body: <p>The following code fails to redirect the user when they click on a specific Google Earth marker. Everything else works fine. Any pointers?</p>
  
  <p>The javascript:</p>
  
  <pre><code>$(function() {
      var latArray = ($("#google_map_section").attr("data-lat")).split(", ");
      var longArray = ($("#google_map_section").attr("data-long")).split(", ");
      var nameArray = ($("#google_map_section").attr("data-name")).split(", ");
      var urlArray = ($("#google_map_section").attr("data-url")).split(", ");
      var mylatlngs = [];
      var markers = [];
      var counter = 0;
      var bounds = new google.maps.LatLngBounds();
  
      while(counter &lt; latArray.length){
         mylatlngs.push(new google.maps.LatLng(
             parseFloat(latArray[counter]),
             parseFloat(longArray[counter]))
          );
          counter++
      };
      var myOptions = {
          zoom: 12,
          center: mylatlngs[mylatlngs.length-1],
          mapTypeId: google.maps.MapTypeId.SATELLITE
      };
      var map = new google.maps.Map(document.getElementById("google_map_section"),
          myOptions
      );
      counter = 0;
      while (counter &lt; mylatlngs.length){
          markers.push(new google.maps.Marker({
              position: mylatlngs[counter], 
              map: map,
              title: nameArray[counter],
              url: urlArray[counter]
          }));
          bounds.extend(mylatlngs[counter]);
          counter++
      };
      counter = 0;
      while (counter &lt; markers.length){
          google.maps.event.addListener(markers[counter], 'click', function() {
              window.location.href = this[counter].url;
          });
          counter++
      };
      map.fitBounds(bounds);
    });
  </code></pre>
  
  <p>The HTML page source:</p>
  
  <pre><code>&lt;div id="google_map_section" data-url="http://localhost:3000/impacts/12, http://localhost:3000/events/9, http://localhost:3000/impacts/10, http://localhost:3000/events/7" data-name="Dead fish!, Oil spill, Acid River Pollution, AMD Seepage" data-lat="-34.0, -34.0333333, -33.638271, -33.724289" data-long="17.0, 18.35, 18.990891, 18.95591"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>Firebug gives the following warning inside the event.addListener function:
  "Uncaught TypeError: Cannot read property 'url' of undefined"</p>
  
  <p><strong>Further Update:</strong></p>
  
  <p>Ok, the problem is the assignment to the url in this line:</p>
  
  <pre><code>url: urlArray[counter]
  </code></pre>
  
  <p>Now this is interesting, if I assign the element of the array directly to the EventListener like so:</p>
  
  <pre><code>google.maps.event.addListener(markers[counter], 'click', function() {
      window.location.href = urlArray[counter];
  });
  </code></pre>
  
  <p>it still does not work, but hard coding the url does! So this:</p>
  
  <pre><code>google.maps.event.addListener(markers[counter], 'click', function() {
      window.location.href = 'http://www.google.com';
  });
  </code></pre>
  
  <p>works! What the hell?</p>