Javascript 谷歌地图API列表定位和web链接_Javascript_Css_Html_Google Maps Api 3

Javascript 谷歌地图API列表定位和web链接

javascript css html google-maps-api-3

Javascript 谷歌地图API列表定位和web链接,javascript,css,html,google-maps-api-3,Javascript,Css,Html,Google Maps Api 3,我目前正在制作一张有多个标记的地图。在地图下面是一个可单击的列表，单击该列表时会转到相应的标记，并显示标记的信息窗口。我想要帮助的是移动列表，使其位于地图左侧的旁边，而不是下方。我想让列表滚动，因为我将添加更多的标记，从而使列表更大。我需要帮助的第二件事是每个信息窗口内的链接。当前，当单击链接时，它会在地图内部打开，而不是在我想要的新选项卡中打开 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=

我目前正在制作一张有多个标记的地图。在地图下面是一个可单击的列表，单击该列表时会转到相应的标记，并显示标记的信息窗口。我想要帮助的是移动列表，使其位于地图左侧的旁边，而不是下方。我想让列表滚动，因为我将添加更多的标记，从而使列表更大。我需要帮助的第二件事是每个信息窗口内的链接。当前，当单击链接时，它会在地图内部打开，而不是在我想要的新选项卡中打开

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
  var gmarkers = [];
  function initialize() {
    var mapOptions = {
      zoom: 17,
      center: new google.maps.LatLng(52.482615, -1.911246),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);

    var locations = [
      ['BMW<br>Address<br>Postcode<br>City<br><a href="https://www.sytnerbirminghambmw.co.uk/">Website</a>', 52.482615, -1.911246],
      ['Audi<br>Address<br>Postcode<br>City<br><a href="https://listers.co.uk/audi/birmingham">Website</a>', 52.3930665, -1.813306],
      ['Mercedes<br>Address<br>Postcode<br>City<br><a href="https://www.lshauto.co.uk/locations/1769/mercedes-benz-of-birmingham-central/">Website</a>', 52.4797319, -1.8775606],
      ['Porsche<br>Address<br>Postcode<br>City<br><a href="https://www.sytner.co.uk/porsche/dealer-locator/porsche-centre-solihull/">Website</a>', 52.391564, -1.803235],
      ['Ferrari<br>Address<br>Postcode<br>City<br><a href="https://birmingham.ferraridealers.com/en_gb/">Website</a>', 52.3916807, -1.8053753],
      ['Lamborghini<br>Address<br>Postcode<br>City<br><a href="https://www.birmingham.lamborghini/en">Website</a>', 52.5082516, -1.8182291]
    ];

    var marker, i;
    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(map, "click", function() {
      infowindow.close();
    });

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3]),
        map: map
      });
      gmarkers.push(marker);

      google.maps.event.addListener(
        marker,
        "click",
        (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          };
        })(marker, i)
      );
    }
  }
  google.maps.event.addDomListener(window, "load", initialize);
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
<a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br />


var gmarkers=[]；
函数初始化（）{
变量映射选项={
缩放：17，
中心：新google.maps.LatLng（52.482615，-1.911246），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googlemap”）、mapOptions）；
变量位置=[
['BMW
地址
邮政编码
城市
'，52.482615，-1.911246]，
[“奥迪
地址
邮政编码
城市
”，52.3930665，-1.813306]，
[“梅赛德斯
地址
邮政编码
城市
”，52.4797319，-1.8775606]，
[“保时捷
地址
邮政编码
城市
”，52.391564，-1.803235]，
[“法拉利
地址
邮政编码
城市
”，52.3916807，-1.8053753]，
[“兰博基尼
地址
邮政编码
城市
”，52.5082516，-1.8182291]
];
var标记，i；
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（映射，“单击”，函数（）{
infowindow.close（）；
});
对于（i=0；i

下面是一段代码

使地图宽度为页面宽度的50%（或任意大小）。将侧边栏向右浮动，带有

溢出：auto

html, body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#googlemap {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
}

#sidebar {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
  float: right;
  overflow: auto;
}

代码片段：

html，
身体{
身高：100%；
宽度：100%；
填充：0px；
边际：0px；
}
#谷歌地图{
高度：500px；
宽度：50%；
填充：0px；
边际：0px；
}
#边栏{
高度：500px；
宽度：50%；
填充：0px；
边际：0px；
浮动：对；
溢出：自动；
}


var gmarkers=[]；
函数初始化（）{
变量映射选项={
缩放：17，
中心：新google.maps.LatLng（52.482615，-1.911246），
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“googlemap”）、mapOptions）；
变量位置=[
['BMW
地址
邮政编码
城市
'，52.482615，-1.911246]，
[“奥迪
地址
邮政编码
城市
”，52.3930665，-1.813306]，
[“梅赛德斯
地址
邮政编码
城市
”，52.4797319，-1.8775606]，
[“保时捷
地址
邮政编码
城市
”，52.391564，-1.803235]，
[“法拉利
地址
邮政编码
城市
”，52.3916807，-1.8053753]，
[“兰博基尼
地址
邮政编码
城市
”，52.5082516，-1.8182291]
];
var标记，i；
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
对于（i=0；i

将地图设置为页面宽度的50%（或任意大小）。将侧边栏向右浮动，带有

溢出：auto

html, body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#googlemap {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
}

#sidebar {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
  float: right;
  overflow: auto;
}

代码片段：

html，
身体{
身高：100%；
宽度：100%；
填充：0px；
边际：0px；
}
#谷歌地图{
高度：500px；
宽度：50%；
填充：0px；
边际：0px；
}
#边栏{
高度：500px；
宽度：50%；
填充：0px；
边际：0px；
浮动：对；
溢出：自动；
}


var gmarkers=[]；
函数初始化（）{
变量映射选项={
缩放：17，
中心：新google.maps.LatLng（52.482615，-1.911246），
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“googlemap”）、mapOptions）；
变量位置=[
['BMW
地址
邮政编码
城市
'，52.482615，-1.911246]，
[“奥迪
地址
邮政编码
城市
”，52.3930665，-1.813306]，
[“梅赛德斯
地址
邮政编码
城市
”，52.4797319，-1.8775606]，
[“保时捷
地址
邮政编码
城市
”，52.391564，-1.803235]，
[“法拉利
地址
邮政编码
城市
”，52.3916807，-1.8053753]，
[“兰博基尼
地址
邮政编码
城市
”，52.5082516，-1.8182291]
];
var标记，i；
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
对于（i=0；i