As the API for Google Maps version 3 is still evolving, I do not wish to use any plugins. My original script for version 2 works perfectly to display custom infowindow that appears when a marker is clicked and disappears when the map region is clicked. The new API introduces an object google.maps.OverlayView, which I have difficulty using in conjunction with JQuery. A sample of my original code is shown below:
function Results(json) {
var L = json.output.length;
var website = json.web;
if (L > 0) {
for(i=0; i<L; i++) {
var listing = json.output[i];
addLocation(listing, website);
}
}
}
function addLocation(A, B) {
var point = new GLatLng(A.lat, A.lng);
var icon = new GIcon(baseIcon);
icon.image = 'images/' + A.mks + '.png';
var M = new GMarker(point, icon);
map.addOverlay(M);
GEvent.addListener(M, 'click', function(){
showInfo(M, '<A href=\"site.php?ID=' + A.id + '\">' + A.name + '</A>');
});
GEvent.addListener(map, 'click', function(){
hideInfo();
});
showResult(A, B);
}
function showInfo(M, text){
var markerOffset = map.fromLatLngToDivPixel(M.getPoint());
$ ('#info').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
$ ('#info').show()
.css({ top:markerOffset.y, left:markerOffset.x })
.html(text);
}
function hideInfo(){
$ ('#info').hide();
}
var Q = 'search.php'; // an array is output in Json format
$ .getJSON(Q, Results);
The closest example I can find is: http://www.tdmarketing.co.nz/blog/2011/03/09/create-marker-with-custom-labels-in-google-maps-api-v3/ which is still quite far off from what I have in mind.
I am not sure if anyone has an idea of transforming the above so that it can work with API version 3.