Google Maps API v3 - 在一个页面上创建多个带有标记的地图答案

【问题标题】：Google Maps API v3 - creating multiple maps with markers on one pageGoogle Maps API v3 - 在一个页面上创建多个带有标记的地图
【发布时间】：2014-07-20 11:07:57
【问题描述】：

我正在尝试创建一个包含 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.

【问题讨论】：

地理编码异步运行，当回调被执行时你的循环已经完成（并且i在回调中总是2）
fixed issue with function closure，我确定某处有这个副本
@geocodezip，您应该将其发布为答案 :)

标签： php jquery google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

下面的代码修复了函数闭包的问题（他们 makeMap 函数对“i”的值进行闭包，以便在地理编码器回调运行时使用）：

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);

Working fiddle

代码 sn-p：

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>

【讨论】：