I want to introduce a functionality which allows a marker’s infoname to appear or disappear upon mouseover or mouseout of a corresponding DIV element generated from jQuery. However, I am getting a “a is undefined” error on line 19 of main.js. 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:
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('<DIV id=' + A.pid + '>{Blah Blah Blah}</DIV>');
return document.getElementById(A.pid);
}
function process(json) {
$ ('#results').empty();
total = json.details.length;
for(i=0; i<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);});
The error disappears if I merge the function addInfoName
into process
. However, all the DIVs will point to the last marker if I do so. My question is, how do I modify my script to achieve the functionality mentioned above?