Creating custom info windows on Google Maps version 3 with data array from JQuery Output

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.lng);
    var icon = new GIcon(baseIcon);
    icon.image = 'images/' + A.mks + '.png';
    var M = new GMarker(point, icon);

    GEvent.addListener(M, 'click', function(){
        showInfo(M, '<A href=\"site.php?ID=' + + '\">' + + '</A>');
    GEvent.addListener(map, 'click', function(){

    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 })

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: 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.

newest questions tagged jquery – Stack Overflow

About Admin