title: Showing Google Maps Marker infoname on Mouseover of a Dynamically Generated DIV
body: <p>I want to introduce a <strong>functionality which allows a marker's infoname to appear or disappear upon mouseover or mouseout of a corresponding DIV element</strong> generated from jQuery. However, I am getting a "<strong>a is undefined</strong>" error on line 19 of <a href="http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/5/15/main.js" rel="nofollow">main.js</a>. After extensive testing on my script, I realise that this has something to do with the marker in the newly added lines as commented below:</p>
  
  <pre><code>function addMarker(A) {
   var point = new google.maps.LatLng(A.lat, A.lng);      
   var image = new google.maps.MarkerImage('images/r.png',
    new google.maps.Size(30, 30),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 30));
   marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: image,
   });
  }
  
  function addInfoName(A) {
   var infoname = new infoName; // custom object
   google.maps.event.addListener(marker, 'mouseover', function(event) {infoname.show();});
   google.maps.event.addListener(marker, 'mouseout', function(event) {infoname.hide();});
   infoname.open(map, marker);
  }
  
  function showResult(A) {
   $('#results').append('&lt;DIV id=' + A.pid + '&gt;{Blah Blah Blah}&lt;/DIV&gt;');
   return document.getElementById(A.pid);
  }
  
  function process(json) {
   $('#results').empty();
   total = json.details.length;
   for(i=0; i&lt;total; i++) {
    var detail = json.details[i];
    var marker;
    addMarker(detail);
    addInfoName(detail);
  
  // these new lines are added
    var listDisplay = showResult(detail);
    listDisplay.onmouseover = function(){google.maps.event.trigger(marker, 'mouseover');};
    listDisplay.onmouseout = function(){google.maps.event.trigger(marker, 'mouseout');};
   }
  }
  
  google.maps.event.addListener(map, 'idle', function () {$.getJSON(query, process);});
  </code></pre>
  
  <p>The error disappears if I merge the function <code>addInfoName</code> into <code>process</code>. However, all the DIVs will point to the last marker if I do so. My question is, <strong>how do I modify my script to achieve the functionality mentioned above</strong>?</p>