多个谷歌地图图标？答案

【问题标题】：Multiple Google Maps icons?多个谷歌地图图标？
【发布时间】：2015-08-01 15:55:34
【问题描述】：

我正在尝试将以下两个代码块组合在一起。

但由于某种原因，当我在浏览器中加载页面时，首先第二个代码块将标记加载到地图上，然后页面刷新，第一块代码加载到地图上！

这是我的全部代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Google maps</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

     var map;
     geocoder = new google.maps.Geocoder();

     function initialize() {
         var mapOptions = {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         };

         map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

         codeAddress();
     }

     function codeAddress() {
         var address = '<?= $_GET['location'] ?>';
         geocoder.geocode( { 'address': address}, function(results, status) {
             if (status == google.maps.GeocoderStatus.OK) {
                 map.setCenter(results[0].geometry.location);
                 var marker = new google.maps.Marker({
                      icon: 'meicon.png',
                      map: map,
                      position: results[0].geometry.location
                 });
             } else {
                alert("Error loading map");
             }
         });
     }
     google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>

  <body>
    <div id="map-canvas"></div>
  <script type="text/javascript">
    var locations = [
        ['Bondi Beach', 51.5033631,-0.1276253, 1]
    ];
    var maps = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 15,
      center: new google.maps.LatLng(51.5033630,-0.1276250),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var markers, i;

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

      google.maps.event.addListener(markers, 'click', (function(markers, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, markers);
        }
      })(markers, i));
    }
  </script>
  </body>
</html>

有人可以就这个问题提出建议吗？

提前致谢。

【问题讨论】：

您正在创建两个不同的地图。当您“组合功能”时，您希望发生什么？

标签： javascript google-maps

【解决方案1】：

这可能是因为您在第一个块中的地址上调用地理编码器，这是对 google 的异步调用以检查地址。当代码与谷歌对话时，页面运行第二个代码块。当该调用返回时，它将运行第一个块中的其余代码，该块设置地图的中心。

【讨论】：

【解决方案2】：

原因很简单，您正在加载两个地图，第一个在 <head> 脚本中调用，在名为 map 的地图画布中构建地图。在正文中的第二个脚本中，您创建了另一个名为 maps 的地图，这也在 map-canvas 中创建。您只需要一个工作地图，然后用它来做您想做的事情。

【讨论】：