Question

我已经阅读了许多关于让多个Google地图显示在一个页面上的不同帖子，但似乎没有一个与我使用Google Maps API V3的代码相关。

我在同一页面上有2个Google地图，但在不同的标签中。我复制了Map1的代码并将其粘贴到第二个选项卡中以创建Map2。然后我更改了Map2的“var map”和“map_canvas”id，但是在发布时，页面上只显示了Map2。

我尝试了删除行的选项;

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

来自第二个标签，以便它不会在同一页面上重复，但不起作用。

可以在此处查看该页面：http://tcchurch.com.au/table1/index.php/missions

2张不同的地图应显示在“我们的传教士”和“国际合作伙伴”标签下。

非常感谢任何帮助。感谢。

伊恩

Answer 1

您有重复的功能。这不起作用，也给它们提供唯一的名称，或者有一个初始化函数来初始化两个映射。

function initialize() {
    var latlng = new google.maps.LatLng(0, 40);
    var settings = {
        zoom: 2,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
....
}

function initialize2() {
    var latlng = new google.maps.LatLng(0, 40);
    var settings = {
        zoom: 2,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), settings);
...
}

Answer 2

不仅为函数赋予不同的名称，还为全局变量赋予不同的名称 - 在乞讨时没有“var”的变量：

将帖子ID分配给：“map”，“initialize”和“codeAddress”这样（不是超级干净但有效）：

var geocoder;
    var map;

    function codeAddress<? echo $post['Post']['id']; ?>() {
      var address = "<? echo h($post['Post']['address']); ?>, <? echo h($post['Post']['ZIP']); ?> <? echo $cities[$post['Post']['city_id']]; ?>";
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map<? echo $post['Post']['id']; ?>.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map<? echo $post['Post']['id']; ?>,
              position: results[0].geometry.location
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }

    function initialize<? echo $post['Post']['id']; ?>() {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var mapOptions = {
        zoom: 14,
        center: latlng
      }
      map<? echo $post['Post']['id']; ?> = new google.maps.Map($('googleMap<? echo $post["Post"]["id"]; ?>'), mapOptions);
      codeAddress<? echo $post['Post']['id']; ?>()
    }   

    google.maps.event.addDomListener(window, 'load', initialize<? echo $post['Post']['id']; ?>);

多个Google地图不会在单页上显示

2 个答案: