Jquery链接鼠标悬停谷歌地图

I currently have a location search kind of web app where user can look find places they interest of, now i had integrate search result with google maps. This works fine as result display the maps will have marker. But some marker are out of range which user need to zoom out before they can view it, how can i use jquery so that if user mouse over list a tag the map will autopan to find the related marker? Folowing are my code:

<div class="businessresult clearfix" uid="5">
<h4 class="itemheading" id="bizTitle0">
            <a id="bizTitleLink0" href="/business/hotel5">1.Hotel5</a>
</h4>
</div>
<div class="businessresult clearfix" uid="4">
<h4 class="itemheading" id="bizTitle0">
            <a id="bizTitleLink0" href="/business/hotel4">2.Hotel4 </a>
</h4>
</div>
<div class="businessresult clearfix" uid="3">
<h4 class="itemheading" id="bizTitle0" >
            <a id="bizTitleLink0" href="/business/hotel3">3.Hotel3 </a>
</h4>
</div>

Google maps js:

<script type="text/javascript">
var gmap, gpoints = [];
var flat = '<?=$this->biz[0]["y"]?>';
var flng = '<?=$this->biz[0]["x"]?>';

$(document).ready(function() {
        initialize();
    });


function initialize() {

        gmap = new google.maps.Map(document.getElementById('map-container'), {
            zoom:               13,
            streetViewControl:  false,
            scaleControl:       false,
            center: new google.maps.LatLng(flat, flng),
            mapTypeId:          google.maps.MapTypeId.ROADMAP

        });


<?php
        foreach ($this->paginator as $bizArr) {
            $lat = $bizArr['y'];
            $long = $bizArr['x'];
            $name = addslashes($bizArr['business_name']);
            $rating = $bizArr['rating'];
            $content = '';
?> 
gpoints.push( new point(gmap, '<?=$lat; ?>', '<?=$long; ?>', '<?php echo $content; ?>',gmap.center) );
        <?php } ?>

    }



function point(_map, lat, lng, content,center) {
         this.marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            map: _map,
            tooltip: content
        });

        var gpoint = this;
        var tooltip = new Tooltip({map: _map}, gpoint.marker);
        tooltip.bindTo("text", gpoint.marker, "tooltip");
        google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
            tooltip.addTip();
            tooltip.getPos2(gpoint.marker.getPosition());
            //_map.panTo(gpoint.marker.getPosition())
        });



        google.maps.event.addListener(gpoint.marker, 'mouseout', function() {
            tooltip.removeTip();
        });      

        google.maps.event.addListener(gpoint.marker, 'click', function() {
        _map.setZoom(15);
        _map.setCenter(gpoint.marker.getPosition());
        });

    }

</script>

Thanks

you're most likely interested in the panTo(latLng:LatLng) method of the Map API https://developers.google.com/maps/documentation/javascript/reference#Methods. You can then simply handle it in JS via an event ( hover ), and some metadata on the a tag such as

<a id="biz" href="http://somewhere.com" lat="12.345" lng="12.345">Biz</a>

And on the JS side

$('#biz').hover(function() {
   var point = new google.maps.LatLng($('#biz').attr('lat'), $('#biz').attr('lng'));
   gmap.panTo(point); // where map is 
});

Just a quick note: Element id's should be unique.

The best way of handling this would be to have

<a id="bizTitleLink_5" href="/business/hotel5" onmouseover="javascript:panTo(5)">1.Hotel5</a>

Then in your js have something like

function panTo(id){
    map.panTo(markers[id].getPoint());
}

Obviously you will know more about how your map is called and id's on your markers are set so you may need to play with it.

(if you are just using the anchor id for styling, simply refer to it by '.businessresult a' and remove the id from the anchor.)