如何在同一页面上添加三个谷歌地图实例

您的代码有语法错误1.在一个if ... else if ... else ...语句中只能有一个else。2.传递到document.getElementById（）中的字符串必须与实际的DOM元素id匹配，您的字符串中有额外的空格。

概念验证小提琴

代码片段：

// *
// * Two maps on the same page, expanded to three
// * 2015 - en.marnoto.com
// *
// necessary variables
var mapLeft, mapRight, mapThree;
var infoWindowLeft, infoWindowRight, infoWindowThree;
// markersData variable stores the information necessary to each marker
var markersDataLeft = [{
    lat: 40.6486333,
    lng: -8.745,
    name: "Camping Praia do Farol",
    address1: "Rua Diogo Cão, 125",
    address2: "Praia da Barra",
    postalCode: "3830-772 Gafanha da Nazaré" // don't insert comma in the     last item of each marker
  }, {
    lat: 40.54955,
    lng: -8.7498167,
    name: "Camping Costa Velha",
    address1: "Quinta dos Patos, n.º 2",
    address2: "Praia da Costa Nova",
    postalCode: "3830-453 Gafanha da Encarnação" // don't insert comma in     the last item of each marker
  }, {
    lat: 40.6447167,
    lng: -8.7129167,
    name: "Camping Gafanha da Boavista",
    address1: "Rua dos Balneários do Complexo Desportivo",
    address2: "Gafanha da Nazaré",
    postalCode: "3830-225 Gafanha da Nazaré" // don't insert comma in the  last item of each marker
  } // don't insert comma in the last item
];
var markersDataRight = [{
    lat: 40.6386333,
    lng: -8.745,
    name: "Camping Praia da Barra",
    address1: "Rua Diogo Cão, 125",
    address2: "Praia da Barra",
    postalCode: "3830-772 Gafanha da Nazaré" // don't insert comma in the    last item of each marker
  }, {
    lat: 40.59955,
    lng: -8.7498167,
    name: "Camping Costa Nova",
    address1: "Quinta dos Patos, n.º 2",
    address2: "Praia da Costa Nova",
    postalCode: "3830-453 Gafanha da Encarnação" // don't insert comma in     the last item of each marker
  }, {
    lat: 40.6247167,
    lng: -8.7129167,
    name: "Camping Gafanha da Nazaré",
    address1: "Rua dos Balneários do Complexo Desportivo",
    address2: "Gafanha da Nazaré",
    postalCode: "3830-225 Gafanha da Nazaré" // don't insert comma in the     last item of each marker
  } // don't insert comma in the last item
];
var markersDataThree = [{
    lat: 40.6386333,
    lng: -8.745,
    name: "Camping Praia da Barra",
    address1: "Rua Diogo Cão, 125",
    address2: "Praia da Barra",
    postalCode: "3830-772 Gafanha da Nazaré" // don't insert comma in the     last item of each marker
  }, {
    lat: 40.59955,
    lng: -8.7498167,
    name: "Camping Costa Nova",
    address1: "Quinta dos Patos, n.º 2",
    address2: "Praia da Costa Nova",
    postalCode: "3830-453 Gafanha da Encarnação" // don't insert comma in     the last item of each marker
  }, {
    lat: 40.6247167,
    lng: -8.7129167,
    name: "Camping Gafanha da Nazaré",
    address1: "Rua dos Balneários do Complexo Desportivo",
    address2: "Gafanha da Nazaré",
    postalCode: "3830-225 Gafanha da Nazaré" // don't insert comma in the     last item of each marker
  } // don't insert comma in the last item
];
function initialize(setMap) {
  var mapOptions;
  if (setMap == "mapLeft") {
    mapOptions = {
      center: new google.maps.LatLng(40.601203, -8.668173),
      zoom: 11,
      mapTypeId: 'roadmap',
    };
    mapLeft = new google.maps.Map(document.getElementById('map-canvas-left'), mapOptions);
    // a new Info Window is created
    infoWindowLeft = new google.maps.InfoWindow();
    // Event that closes the Info Window with a click on the map
    google.maps.event.addListener(mapLeft, 'click', function() {
      infoWindowLeft.close();
    });
  } else if (setMap == "mapRight") {
    mapOptions = {
      center: new google.maps.LatLng(40.601203, -8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
    };
    mapRight = new google.maps.Map(document.getElementById('map-canvas-right'), mapOptions);
    // a new Info Window is created
    infoWindowRight = new google.maps.InfoWindow();
    // Event that closes the Info Window with a click on the map
    google.maps.event.addListener(mapRight, 'click', function() {
      infoWindowRight.close();
    });
  } else if (setMap == "mapThree") {
    mapOptions = {
      center: new google.maps.LatLng(40.601203, -8.668173),
      zoom: 7,
      mapTypeId: 'roadmap',
    };
    mapThree = new google.maps.Map(document.getElementById('map-canvas-three'), mapOptions);
    // a new Info Window is created
    infoWindowThree = new google.maps.InfoWindow();
    // Event that closes the Info Window with a click on the map
    google.maps.event.addListener(mapThree, 'click', function() {
      infoWindowThree.close();
    });
  }
  // Finally displayMarkers() function is called to begin the markers      creation
  displayMarkers(setMap);
  // Create second map only when initialize function is called for the     first time.
  // Second time setMap is equal to mapRight, so this condition returns     false and it will not run  
  if (setMap == "mapLeft") {
    initialize("mapRight");
  } else if (setMap == "mapRight") {
    initialize("mapThree");
  }
}
google.maps.event.addDomListener(window, 'load', function() {
  initialize("mapLeft")
});
// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(setMap) {
  var markersData;
  var map;
  if (setMap == "mapLeft") {
    markersData = markersDataLeft;
    map = mapLeft;
  } else if (setMap == "mapRight") {
    markersData = markersDataRight;
    map = mapRight;
  } else {
    markersData = markersDataThree;
    map = mapThree;
  }
  // this variable sets the map bounds according to markers position
  var bounds = new google.maps.LatLngBounds();
  // for loop traverses markersData array calling createMarker function for     each marker 
  for (var i = 0; i < markersData.length; i++) {
    var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
    var name = markersData[i].name;
    var address1 = markersData[i].address1;
    var address2 = markersData[i].address2;
    var postalCode = markersData[i].postalCode;
    createMarker(setMap, latlng, name, address1, address2, postalCode);
    // marker position is added to bounds variable
    bounds.extend(latlng);
  }
  // Finally the bounds variable is used to set the map bounds
  // with fitBounds() function
  map.fitBounds(bounds);
}
// This function creates each marker and it sets their Info Window content
function createMarker(setMap, latlng, name, address1, address2, postalCode) {
  var map;
  var infoWindow;
  if (setMap == "mapLeft") {
    map = mapLeft;
    infoWindow = infoWindowLeft;
  } else if (setMap == "mapRight") {
    map = mapRight;
    infoWindow = infoWindowRight;
  } else {
    map = mapThree;
    infoWindow = infoWindowThree;
  }
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    title: name
  });
  // This event expects a click on a marker
  // When this event is fired the Info Window content is created
  // and the Info Window is opened.
  google.maps.event.addListener(marker, 'click', function() {
    // Creating the content to be inserted in the infowindow
    var iwContent = '<div id="iw_container">' +
      '<div class="iw_title">' + name + '</div>' +
      '<div class="iw_content">' + address1 + '<br />' +
      address2 + '<br />' +
      postalCode + '</div></div>';
    // including content to the Info Window.
    infoWindow.setContent(iwContent);
    // opening the Info Window in the current map and at the current marker location.
    infoWindow.open(map, marker);
  });
}

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  display: flex;
}
#map-canvas-left,
#map-canvas-right,
#map-canvas-three {
  height: 250px;
  width: 550px;
}
#iw_container .iw_title {
  font-size: 16px;
  font-weight: bold;
}
.iw_content {
  padding: 15px 15px 15px 0;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div class="container">
  <div id="map-canvas-left"></div>
  <div id="map-canvas-right"></div>
  <div id="map-canvas-three"></div>
</div>