jquery - div ホバーで、Google マップにマーカー情報ウィンドウを表示

Question

検索結果に応じてマーカー付きの Google マップを読み込んでいるページがあります。検索結果は、タンデムのいくつかの div です。誰かが div にカーソルを合わせると、Google マップ上のそれぞれのマーカーにその情報ウィンドウが表示されるようにします。それはどういうわけか可能ですか？

以下のjqueryコードを提供します。別のページのコードが必要な場合はお知らせください

if (typeof SPGeoMapsModReg == 'undefined') {
    var SPGeoMapsModReg = {}
}
function SPGeoMapModInit(a, b) {
    jQuery(document).ready(function() {
        SPGeoMapsModReg[a] = new SPGeoMapMod(a).init(b)
    })
}
function SPGeoMapMod(h) {
    this.Options;
    this.Map;
    this.Position;
    this.Markers = [];
    this.cid = h + 'Inner';
    this.Container = jQuery('#' + h);
    this.Canvas = jQuery('#' + this.cid);
    this.InfoWindow;
    this.init = function(a) {
        this.Options = a;
        this.Container.css('width', a.mapWidth).css('height', a.mapHeight).css('background-color', 'black').css('background', 'url(media/sobipro/progress/ajax-loader.gif) center center no-repeat').fadeTo('slow', 0.2);
        this.getEntries();
        return this
    };
    this.getEntries = function() {
        var b = this;
        jQuery.ajax({
            url: 'index.php',
            type: 'POST',
            dataType: 'json',
            data: {
                'option': 'com_sobipro',
                'task': 'geomod.load',
                'sid': this.Options.sid,
                'format': 'raw',
                'section': this.Options.pid,
                'ctask': this.Options.task
            },
            success: function(a) {
                b.InitMap(a)
            }
        })
    };
    this.InitMap = function(a) {
        this.Position = new google.maps.LatLng(parseFloat(this.Options.startLatitude), parseFloat(this.Options.startLongitude));
        var b = [];
        for (i = 0; i < this.Options.availableViews.length; i++) {
            b[i] = google.maps.MapTypeId[String(this.Options.availableViews[i]).toUpperCase()]
        }
        var c = {
            zoom: parseFloat(this.Options.zoomLevel),
            mapTypeId: google.maps.MapTypeId[String(this.Options.defaultView).toLocaleUpperCase()]
        };
        for (var i in this.Options.mapOptions) {
            c[i] = this.Options.mapOptions[i]
        }
        if (b.length > 0) {
            c['mapTypeControlOptions'] = {
                mapTypeIds: b
            }
        }
        this.Canvas.css('width', this.Options.mapWidth).css('height', this.Options.mapHeight);
        this.Map = new google.maps.Map(document.getElementById(this.cid), c);
        this.Map.setCenter(this.Position);
        var d = this;
        for (var i = 0; i < a.entries.length; i++) {
            var e = new google.maps.LatLng(parseFloat(a.entries[i].latitude), parseFloat(a.entries[i].longitude));
            var f = new google.maps.Marker({
                'position': e
            });
            f.sid = a.entries[i].sid;
            google.maps.event.addListener(f, 'mouseover', function() {
                d.OpenInfo(this)
            });
            this.Markers.push(f)
        }

        var g = new MarkerClusterer(this.Map, this.Markers);
        this.Container.fadeTo('slow', 1).css('background', 'none');
        if (a.msg.length) {
            alert(a.msg)
        }
    };
    this.OpenInfo = function(b) {
        var c = this;
        try {
            this.InfoWindow.close()
        } catch (e) {}
        this.InfoWindow = new google.maps.InfoWindow();
        this.InfoWindow.setContent('<img src="media/sobipro/progress/ajax-loader.gif"/>');
        this.InfoWindow.open(this.Map, b);
        jQuery.ajax({
            url: 'index.php',
            type: 'POST',
            dataType: 'json',
            data: {
                'option': 'com_sobipro',
                'task': 'geomod.info',
                'sid': b.sid,
                'format': 'raw',
                'iid': c.Options.iid
            },
            success: function(a) {
                c.InfoWindow.setContent(a.html)
            }
        })
    }
}