Google Maps API JSFIDDLE 当我需要显示 5 个标记时显示一个标记

Question

我正在尝试向 Google Maps API JSFiddle 添加 5 个标记，但只显示了一个。帮助？ 我不知道我的代码有什么问题，我已经尝试了一切。据我所知，我的代码是正确的。

JSFIDDLE 链接：https://jsfiddle.net/MarnieMaclean/u04cg62p/

// Initialize and add the map
function initMap() {

//The location of Aberdeen
var aberdeen = {lat: 57.155988, lng: -2.095139};
var city1 = 'Aberdeen\n'+'lat:57.155988, lng: -2.095139'; // The 
map, 
centered at Aberdeen
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: aberdeen});
// The marker, positioned at Aberdeen
var marker1 = new google.maps.Marker({position: aberdeen, map: map,
id: c1, title: city1});

//The location of Inverness
var inverness = {lat: 57.480819, lng: -4.224250};
var city2 = 'Inverness\n'+'lat: 57.480819, lng: -4.224250'; // The 
map, centered at Inverness
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: inverness});
// The marker, positioned at Inverness
var marker2 = new google.maps.Marker({position: inverness, map: map,
id:c2, title: city2});


//The location of Dundee
var dundee = {lat: 56.467546, lng: -2.969593}; var city3 = dundee;
// The map, centered at Dundee
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: dundee});
// The marker, positioned at Dundee
var marker3 = new google.maps.Marker({position: dundee, map: map});

//The location of Glasgow
var glasgow = {lat: 55.875362, lng: -4.250252};
var city4 = 'Glasgow\n'+'lat: 55.875362, lng: -4.250252'; // The 
map, centered at Glasgow
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: glasgow});
// The marker, positioned at Glasgow
var marker4 = new google.maps.Marker({position: glasgow, map: map,
id:c4, title: city4});

//The location of Edinburgh
var edinburgh = {lat: 55.959425, lng: -3.189161};
var city5 = 'Edinburgh\n'+'lat: 55.959425, lng: -3.189161';
var map = new google.maps.Map( document.getElementById('map'), 
{zoom: 4, center: edinburgh});
// The marker, positioned at Edinburgh
var marker5 = new google.maps.Marker({position: edinburgh, map: map,
id: c5, title: city5}); }

Answer 1

您只需要一个地图对象（移除其他对象）

 // Initialize and add the map
  function initMap() {
  var inverness = {lat: 57.480819, lng: -4.224250};
  var city1 = {position: inverness};
  // The map, centered at Inverness
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: inverness});
  // The marker, positioned at Inverness
  var marker1 = new google.maps.Marker({position: inverness, map: map});

  var dundee = {lat: 56.467546, lng: -2.969593};
  var city2 = {position: dundee};

  // The marker, positioned at Dundee
  var marker2 = new google.maps.Marker({position: dundee, map: map});

  var glasgow = {lat: 55.875362, lng: -4.250252};
  var city3 = {position: glasgow};


  // The marker, positioned at Glasgow
  var marker3 = new google.maps.Marker({position: glasgow, map: map});

    var edinburgh = {lat: 55.959425, lng: -3.189161};
    var city4 = {position: edinburgh};

    // The marker, positioned at Edinburgh
  var marker4 = new google.maps.Marker({position: edinburgh, map: map}); 

  var aberdeen = {lat: 57.155988, lng: -2.095139};
  var city5 = {position: aberdeen};

  // The marker, positioned at Aberdeen
  var marker5 = new google.maps.Marker({position: aberdeen, map: map});
}  

https://jsfiddle.net/0uq73kzo/

Answer 2

问题是：您创建了 5 次地图，每次都设置它并且每次只设置一个标记。每次您使用变量“map”时，最后一个获胜。那得到显示。所以：在开头创建“地图”一次，然后在下面使用它。

删除另外 4 个“var map = ...”行。