Google Maps API v3 -在一个页面上创建多个带有标记的地图 - Google Maps API v3 - creating multiple maps with markers on one page

我试图创建一个滑动条与3个幻灯片，每个包含一个迷你地图与标记指向特定的位置。我设法创建了一张幻灯片，但每次尝试在此页面上创建多个幻灯片都会失败。下面是我到目前为止的代码:

HTML + PHP

<?php if (have_rows('job_offers')): ?>
  <?php
    $rows = get_field('job_offers');
    $row_count = count($rows);
      for ($i = 0; $i <= 2; $i++) {
  ?>
  <li>
  <div id='googleMap<?php echo $i; ?>' style="position:absolute;top:0;right:0;width:180px;height:100%;"></div>    
  </li>
  <?php } ?>
<?php endif; ?>

jQuery

和

var geocoder = new google.maps.Geocoder();
var map;
var locations = ["London",'Paris','Barcelona'];
var pos;
function initialize()
{
    google.maps.visualRefresh = true;
    getGeoCode();
}
function getGeoCode()
{
    for (var i=0; i<3 ; i++) {
    geocoder.geocode({'address': locations[i]}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK)
        {
            pos[i] = results[0].geometry.location;
            var mapOptions = {
                zoom: 8,
                center: pos[i],
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                styles: [
                    { stylers: [{hue:'#C4268C'},{lightness:-60},{saturation:100}]}
                ]
            };
            map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions);
            var image = '<?php echo get_template_directory_uri(); ?>/images/marker.png';
            var marker = new google.maps.Marker({
                position: pos[i],
                icon:image
            });
            marker.setMap(map[i]);
        }
        else
        {
            alert("Not found");
        }
    });
}
}
google.maps.event.addDomListener(window, 'load', initialize);

当我不尝试使用数组时，一切都很好。如有任何提示，我将不胜感激。欢呼,e .

下面的代码修复了函数闭包的问题(它们makeMap函数保存"i"值的闭包，以便在geocoder回调运行时使用):

var geocoder = new google.maps.Geocoder();
var map = [];
var locations = ["London",'Paris','Barcelona'];
var pos = [];
var infowindow = new google.maps.InfoWindow({});
function initialize()
{
    google.maps.visualRefresh = true;
    getGeoCode();
}
function makeMap(i) {
    geocoder.geocode({'address': locations[i]}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK)
        {
            pos[i] = results[0].geometry.location;
            var mapOptions = {
                zoom: 8,
                center: pos[i],
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                styles: [
                    { stylers: [{hue:'#C4268C'},{lightness:-60},{saturation:100}]}
                ]
            };
            map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions);
            // var image = '<?php echo get_template_directory_uri(); ?>/images/marker.png';
            var marker = new google.maps.Marker({
                position: pos[i],
                // icon:image
            });
            marker.setMap(map[i]);
        }
        else
        {
            alert("Not found");
        }
    });
}
function getGeoCode()
{
    for (var i=0; i<3 ; i++) {
        makeMap(i);
}
}
google.maps.event.addDomListener(window, 'load', initialize);

工作小提琴

代码片段:

var geocoder = new google.maps.Geocoder();
var map = [];
var locations = ["London", 'Paris', 'Barcelona'];
var pos = [];
var infowindow = new google.maps.InfoWindow({});
function initialize() {
  google.maps.visualRefresh = true;
  getGeoCode();
}
function makeMap(i) {
  geocoder.geocode({
    'address': locations[i]
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      pos[i] = results[0].geometry.location;
      var mapOptions = {
        zoom: 8,
        center: pos[i],
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        styles: [{
          stylers: [{
            hue: '#C4268C'
          }, {
            lightness: -60
          }, {
            saturation: 100
          }]
        }]
      };
      map[i] = new google.maps.Map(document.getElementById("googleMap" + i), mapOptions);
      // var image = '<?php echo get_template_directory_uri(); ?>/images/marker.png';
      var marker = new google.maps.Marker({
        position: pos[i],
        // icon:image
      });
      marker.setMap(map[i]);
    } else {
      alert("Not found");
    }
  });
}
function getGeoCode() {
  for (var i = 0; i < 3; i++) {
    makeMap(i);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

#googleMap0,
#googleMap1,
#googleMap2,
#googleMap3 {
  width: 500px;
  height: 500px;
}

<script src="http://maps.google.com/maps/api/js"></script>
<table border="1">
  <tr>
    <td>
      <div id="googleMap0"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="googleMap1"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="googleMap2"></div>
    </td>
  </tr>
</table>