多个针脚谷歌地图

时间:2016-10-01 20:54:09

标签: html google-maps maps pins

我正在尝试为我正在为我的网站创建的地图添加图钉。

html代码最多只给我4个引脚,到目前为止我已尝试添加6个引脚,但还有更多内容,有人可以告诉我如何修复它吗?

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCHLqk7ajEQviaeDoaEOiYvxWAtuATm5oY&callback=initMap">
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 600px; height: 600px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Stolford Beach Stogursey TA51TW', 51.207404, -3.099290, 1],
      ['Lilstock Beach, Lillstock TA51SU', 51.201793,  -3.186663, 2],
      ['Kilve Beach, Kilve TA51EG', 51.192534, -3.227412, 3],
      ['<p>East Quantoxhead Beach</p> <p>East Quantoxhead TA51EJ 5Mins- Accesible from kilve at low tide (14:30)</p>', 51.190542, -3.238637, 4],
      ['St Andries Bay, West Quantoxhead TA4 4DY', 51.181029, -3.272607, 5]
      ['Doniford Beach, Doniford TA230TL', 51.179679, -3.308254, 6]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: new google.maps.LatLng( 50.858026, -3.392425),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

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

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);

          infowindow.open(map, marker);

        }
      })(marker, i));
    }
  </script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

请仔细查看初始化var locations的位置。 你在第四个元素之后忘记了那些嵌套数组后面的,

进一步从第6行的网址中删除&callback=initMap,因为它会导致错误。

希望它有所帮助!