从外部锚标签平移并打开gmap3中的信息窗口

Question

i need to center a map and open the info popup from a link external of the map. The link can be even a onclick="javascript();" applyed to an anchor.

My map code is:

        $('#wtb-map').gmap3(
      { action:'init',
        options:{
          streetViewControl: false,
            mapTypeControl: false       
          //zoom: 5
        }   
      },
      { action: 'addMarkers',
        markers:[

          {lat:49.8620722, lng:6.352047, data:'<div class="infowindow"><p><strong>cccc</strong><br/> 275 Croydon Road, Beckenham<br/>Kent, BR3 3PS<br/>United Kingdom <br/>0208-6501300 <br/> <a href="">www.mywebsite.co.uk</a><br/><strong class="tipo">RESELLER</strong></p><a class="moreinfo" href="wtb-about.php">more info</a></div>'},
          {lat:46.59433,lng:0.342236, data:'<div class="infowindow"><p><strong>aaaaa</strong><br/> 275 Croydon Road, Beckenham<br/>Kent, BR3 3PS<br/>United Kingdom <br/>0208-6501300 <br/> <a href="">www.mywebsite.co.uk</a><br/><strong class="tipo">RESELLER</strong></p><a class="moreinfo" href="wtb-about.php">more info</a></div>'},
          {lat:42.704931, lng:2.894697, data:'<div class="infowindow"><p><strong>bbbbb</strong><br/> 275 Croydon Road, Beckenham<br/>Kent, BR3 3PS<br/>United Kingdom <br/>0208-6501300 <br/> <a href="">www.mywebsite.co.uk</a><br/><strong class="tipo">RESELLER</strong></p><a class="moreinfo" href="wtb-about.php">more info</a></div>'}
        ],
        marker:{
          options:{
            draggable: false,
            icon:"../img/marker.png"
          },

          events:{
             click: function(marker, event, data){
                  var map = $(this).gmap3('get'),
                  infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                    if (infowindow){
                    infowindow.open(map, marker);
                    infowindow.setContent(data);
                    } else {
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
                    }




             }
          }
        }
      },
      "autofit");

so

<a href="#" onclick="code to center/open info map to the first marker">One</a>
<a href="#" onclick="code to center/open info map to the secondmarker">Two</a>
<a href="#" onclick="code to center/open info map to the thirdmarker">3</a>

Any suggest are welcome.

Answer 1

this way work for me

var data = [
    {latLng:[48.8620722,2.352047], data:"Paris" ,tag:1 },
    {latLng:[46.59433,0.342236], data:"Poitiers : great city !" ,tag:2 },
    {latLng:[42.704931,2.894697], data:"Perpignan !  GO USAP !" ,tag:3 }
]
$('#map1').gmap3({
map: {
    action: 'init',
    center: [2.811371, 4.557129],
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    callback : function(){
        $.each(data, function(i, item){
            $("#list ul").append("<li><a href='#' rel='" + (i+1) + "'>" + item.data + "</a><div style='display: none;'>"+ item.data +"</div></li>");
        });
    }
},
marker: {
    values: data,
    options: {
        draggable: false
    },
    events: {
        mouseover: function(marker, event, context){
            var map = $(this).gmap3("get");
            infowindow = $(this).gmap3({get:{name:"infowindow"}});
            if (infowindow){
                infowindow.open(map, marker);
                infowindow.setContent(context.data);
            }
            else {
                $(this).gmap3({
                    infowindow:{
                        anchor:marker, 
                        options:{content: context.data}
                    }
                });
            }
        },
        mouseout: function(){
            var infowindow = $(this).gmap3({get:{name:"infowindow"}});
            if (infowindow){
                infowindow.close();
            }
        }
    }
}
});

$("#list ul li a").click(function(){
    var tagid = $(this).attr("rel");
    var data = $(this).next("div").html();
    var map = $("#map1").gmap3({get: {name:'map'}});
    var infowindow = $("#map1").gmap3({get: {name:'infowindow'}});
    var marker = $("#map1").gmap3({get: {name:"marker",tag: parseInt(tagid)}});
    if (infowindow){
        infowindow.open(map, marker);
        infowindow.setContent(data);
    } 
    else {
         $("#map1").gmap3({infowindow:{anchor:marker,options:{content: data}}});
    }
    return false;
});

Answer 2

you can use the addDomListener() to look for an id to trigger a click.

specific part of documentation: http://code.google.com/apis/maps/documentation/javascript/events.html#DomEvents

google.maps.event.addDomListener(document.getElementById("foo"), 'load', initialize);

however, creating a custom listener on a per item basis i have yet to figure out and i have the same question posted.