Google maps api 3 谷歌地图标签信息盒打开外部链接?

Google maps api 3 谷歌地图标签信息盒打开外部链接?,google-maps-api-3,google-maps-markers,Google Maps Api 3,Google Maps Markers,我正在尝试创建一个网页,里面有一个谷歌地图API,有四个标记,可以点击它打开一个信息框,每个信息框都有自己的信息。这一切都很好,但是我在地图下面也有一些图片,我想链接到Google Maps API并打开每个链接所代表的标记,但我似乎不能把我的头放在上面。我试着看了看其他类似的问题,并尝试了他们的答案,但我不知道如何在我自己的代码中实现它 以下是我目前掌握的代码: function initialize() { var mapOptions = { center: new

我正在尝试创建一个网页,里面有一个谷歌地图API,有四个标记,可以点击它打开一个信息框,每个信息框都有自己的信息。这一切都很好,但是我在地图下面也有一些图片,我想链接到Google Maps API并打开每个链接所代表的标记,但我似乎不能把我的头放在上面。我试着看了看其他类似的问题,并尝试了他们的答案,但我不知道如何在我自己的代码中实现它

以下是我目前掌握的代码:

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(53.487509,-2.240009),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);

    var infoWindow = new google.maps.InfoWindow;

    var myLocations = [
        ["Manchester Town Hall", "This magnificent building was designed in Victorian Gothic style by Alfred Waterhouse and opened in 1877. Amongst its many treasures are the Ford Maddox Brown murals which are monument to the ideas of Victorian Manchester, portraying science, invention, education, trade and textile industry.", "townhall.jpg", "http://www.manchester.gov.uk/", 53.479366, -2.244671],
        ["Manchester Royal Exchange Theatre", "Situated in the heart of Manchester, the Royal Exchange is an award-winning producing Theatre with a history spanning five decades. Known for producing classics such as William Shakespeare, we're also one of the country's leading theatres for new writing, with over 125 premieres in the theatre history!", "royalexchange.jpg", "http://www.royalexchange.co.uk/",  53.482696, -2.244588],
        ["Afflecks's Palace", "Afflecks is an emporium of eclecticism in Manchester’s Northern Quarter. A fantastic place to shop for anything unique, handmade or quirky! With over 73 units filled with individual sellers, you'll be sure to find something you love, or something for someone else!", "afflecks.jpg", "http://www.afflecks.com/", 53.482677, -2.23634],
        ["The Printworks", "The Printworks is a buzzing, state of the art entertainment complex located in the heart of Manchester City Centre. It is home to a range of restaurants, bars and clubs alongside a cinema and gym. The Printworks has something to offer both day and night.", "printworks.jpg", "http://www.theprintworks.com/", 53.485061, -2.241509]
        ];


    function infoCallback(infowindow, marker) { 
        return function() {
        infowindow.open(map, marker);
    };
   }    

   function setMarkers(map, myLocations) {  
    for (var i in myLocations)     {                                        
        var name    = myLocations[i][0];
        var info    = myLocations[i][1];
        var image   = myLocations[i][2];
        var url     = myLocations[i][3];
        var lat     = myLocations[i][4];
        var lng     = myLocations[i][5];
        var latlngset;
        latlngset = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({  
          map: map,  title: name,  position: latlngset  
        });


        var content = 
        '<div class="mapContent"><h3>' + name + '</h3>' + '<img width="192" height="128" src="images/' + image + '"> <div class="mapContentText">' + info + '</div> <h4><a href="' + url + '" target="_blank">' + url + '</a></h4> </div>';

        var infowindow = new google.maps.InfoWindow();
          infowindow.setContent(content);
          google.maps.event.addListener(
            marker, 
            'click',
            infoCallback(infowindow, marker)
          );
      }
    }           
    setMarkers(map, myLocations);
  };
函数初始化(){
变量映射选项={
中心:新google.maps.LatLng(53.487509,-2.240009),
缩放:14,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById(“mapContainer”)、mapOptions);
var infoWindow=new google.maps.infoWindow;
变量myLocations=[
[“曼彻斯特市政厅”,“这座宏伟的建筑由阿尔弗雷德·沃特豪斯(Alfred Waterhouse)以维多利亚哥特式风格设计,并于1877年开放。在其众多珍品中,福特·马多克斯·布朗(Ford Maddox Brown)壁画是维多利亚曼彻斯特思想的纪念碑,描绘了科学、发明、教育、贸易和纺织业。”,“townhall.jpg”,"http://www.manchester.gov.uk/", 53.479366, -2.244671],
[“曼彻斯特皇家交换剧院”,“位于曼彻斯特市中心,皇家交换剧院是一家获奖的制作剧院,历史跨越五十年。我们以制作威廉·莎士比亚等经典作品而闻名,同时也是该国领先的新作品剧院之一,在戏剧史上有超过125场首演!”royalexchange.jpg“http://www.royalexchange.co.uk/",  53.482696, -2.244588],
[“Afflecks's Palace”,“Afflecks是曼彻斯特北部地区的一家兼收并蓄的商场。无论是手工制作的还是稀奇古怪的,这里都是购物的好去处!有超过73个单元的独立卖家,你一定会找到你喜欢的东西,或者其他人喜欢的东西!”,“Afflecks.jpg”http://www.afflecks.com/", 53.482677, -2.23634],
[“The Printworks”,“The Printworks是位于曼彻斯特市中心的一个喧闹、最先进的娱乐综合体。它是一系列餐厅、酒吧和俱乐部的所在地,旁边还有电影院和健身房。Printworks可以提供日夜服务。”,“Printworks.jpg”http://www.theprintworks.com/", 53.485061, -2.241509]
];
函数infoCallback(infowindow,marker){
返回函数(){
信息窗口。打开(地图、标记);
};
}    
函数集合标记(映射,myLocations){
对于(myLocations中的var i){
var name=myLocations[i][0];
var info=myLocations[i][1];
var image=myLocations[i][2];
var url=myLocations[i][3];
var lat=myLocations[i][4];
var lng=我的位置[i][5];
var latlngset;
latlngset=new google.maps.LatLng(lat,lng);
var marker=new google.maps.marker({
地图:地图,标题:名称,位置:latlngset
});
变量内容=
''+姓名+''+''+信息+'';
var infowindow=new google.maps.infowindow();
infowindow.setContent(content);
google.maps.event.addListener(
标记,
“点击”,
infoCallback(infowindow,marker)
);
}
}           
设置标记(地图、我的位置);
};
HTML的剪贴画和地图以及下面显示的图像,我想分别链接到它们各自的地图标记:

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5Iwz01YK3kUnBKFSB7W0PML2XcIChJCc&sensor=false"></script>
    <script src="js/mapScript.js"></script>       
</head>

<body onload="initialize()">

    <section id="mapContainer">
    </section>

    <img src="images/tag_townhall.jpg">
    <img src="images/tag_royalexchange.jpg">
    <img src="images/tag_printworks.jpg">
    <img src="images/tag_afflecks.jpg">
</body>


谢谢

将相同的单击侦听器添加到相应的图像中

1。添加名称属性以选择图像

<img name="someName" src="images/tag_townhall.jpg">
<img name="someName" src="images/tag_royalexchange.jpg">
<img name="someName" src="images/tag_printworks.jpg">
<img name="someName" src="images/tag_afflecks.jpg">
google.maps.event.addDomListener(
  document.getElementsByName('someName')[i], 
  'click',
  infoCallback(infowindow, marker)
);