gMap Google Maps select from out-of-map links

I am using gMap. I have the following in my view:

<script>
$("#map4").gMap({ markers: [{ latitude: 47.651968,
                  开发者_Python百科                longitude: 9.478485,
                                  html: "<a href='abc'>ABC</a>" },
                      zoom: 10 });
</script>

<div id="abc">
<a href="">ABC</a>
Description for ABC
</div>

From the map, I can click the link in the info window that scrolls to the Id'ed DIV. I would also like to click on the ABC link outside the map, when clicked, it will show where ABC is in the map (such as the infowindow will show).

How do I achieve that? Thanks.

Though its a late reply, it might help someone in the future. You could use something like ..

google.maps.event.trigger(markers[i], 'click');

where markers is the array of markers on the map.

Invoke the code above on the link click.

YOu basically have to set the center of the map to a new Lat and Lon. Something like this:

map.setCenter(new google.maps.LatLng(this.latitude, this.longitude));

to open the info window simply

myInfoWindow.open(map, yourMarker);

By using javascript you can add an event to <a>'s onClick and set the map with new center.

UPDATE w/ Example: http://jsfiddle.net/kjy112/FEexA/

HTML: create a div for our google map and also a link for the center/info win popup.

<div id='map_canvas'></div>
<a id='marker' href='javascript:showMarker();'>Click Me!</a>

CSS: set dimension for the google map area

#map_canvas{
    width: 400px;
    height: 400px;
}

Javascript action: set map with some random lat lon

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: new google.maps.LatLng(35.137879, -82.836914),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

create our marker with its information window:

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(47.651968, 9.478485),
});

myMarker['infoWin'] = new google.maps.InfoWindow({
    content: "<div id='infoWindow'>Your Info Window!</div>"
});

Here's code that handles when "Click Me!" anchor is clicked:

function showMarker() {
    map.setCenter(myMarker.position); //makes myMarker center of map
    myMarker.setMap(map); //add the marker to the map
    myMarker['infoWin'].open(map, myMarker); //opens the info window associate with the marker
}