关于google地图和页面的联动

Question

关于地图和页面的联动，鼠标经过左边列表后，右边的地图会相应的标出对应的地点，具体效果：http://www.haoqiao.cn/thailan...
请问这种效果是如何实现的？

Answer 1

使用百度地图做过类似的功能
将坐标存在元素中，鼠标hover触发调用地图api显示对应信息框

    $(document).on("mouseenter",".list dd",function(){
        var $this=$(this);
        var index=$this.index();
        if ($this.hasClass("last")) {
            return false;//跳过最后一个
        };
        if (index==parseInt($(".map_head a").attr("data"))) {
            return false;//已标注，则不再执行
        };
        var mapPoint=$this.parent().find(".map_point").eq(index).val();
        if (mapPoint===undefined || mapPoint==",") {
            return false;
        };
        var mapPointArray=mapPoint.split(",");
        var tit=$this.find(".map-tit").text();
        var addr=$this.find(".map-addr").text();
        var cont=$this.find(".map-info").text();
        var this_lng=mapPointArray[0];
        var this_lat=mapPointArray[1];
        var map = new BMap.Map('agency_map');
        var poi = new BMap.Point(this_lng,this_lat);
        map.centerAndZoom(poi, 16);
        map.enableScrollWheelZoom();
        var content = '<div style="margin:0;line-height:20px;padding:2px;">地址：'+addr+'<br/>简介：'+cont.slice(6,cont.length)+'</div>';
        //创建检索信息窗口对象
        var searchInfoWindow = null;
        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title  : tit,  //标题
            width  : 290, //宽度
            height : 80,  //高度
            panel  : "panel", //检索结果面板
            enableAutoPan : true, //自动平移
            enableSendToPhone:false,
            searchTypes   :[
                BMAPLIB_TAB_TO_HERE,  //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        });
        var marker = new BMap.Marker(poi); //创建marker对象
        searchInfoWindow.open(marker);
        marker.addEventListener("click", function(e){
            searchInfoWindow.open(marker);
        })
        map.addOverlay(marker); //在地图中添加marker
        // var src="http://map.baidu.com/?latlng="+this_lat+","+this_lng+"&title="+tit+"&content=地址："+addr+"&src=doubei";
        var src=$this.find(".map-addr a").attr("href");
        //添加标注状态
        $(".map_head a").prop("href",src).attr("data",index);
    });
});

年初写的代码，不忍直视啊(つд⊂)