Google maps 多个谷歌地图赢得'；单页显示

我读过很多关于在一个页面上显示多个谷歌地图的帖子，但是没有一篇与我的代码相关，我的代码使用谷歌地图API V3

我有两个谷歌地图在同一页上，但在不同的标签。我复制了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>

从第二个选项卡开始，这样它就不会在同一页上重复，但这不起作用

可在此处查看该页面：

这两张不同的地图应该显示在“我们的传教士”和“国际合作伙伴”选项卡下

任何帮助都将不胜感激。谢谢

---

伊恩

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

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

---

不仅给函数起不同的名字，而且给全局变量起不同的名字——在乞讨时没有“var”的变量：

将post id分配给：“map”、“initialize”和“codemaddress”，如下所示（不是超级干净，但有效）：

var地理编码器；
var映射；
函数代码地址（）{
var address=“，”；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
}否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
});
}
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（-34.397150.644）；
变量映射选项={
缩放：14，
中心：拉丁
}
map=new google.maps.map（$（'googleMap'），mapOptions）；
代码地址（）
}   
google.maps.event.addDomListener（窗口“加载”，初始化）；

检查javascript控制台。我收到以下警告：

警告：您已多次在此页面上包含谷歌地图API。这可能会导致意外错误。main.js:42

和此错误

不安全的JavaScript尝试使用URL访问框架http://tcchurch.com.au/table1/index.php/missions 从带有URL的框架http://player.vimeo.com/video/32423470?portrait=0. 域、协议和端口必须匹配。

我已经从代码中删除了重复的API和vimeo视频，但仍然只显示一个映射。我在“国际合作伙伴”选项卡中看到一个映射；另一张地图应该在哪里？谢谢你帮我看这个。当我将Map2的函数更改为：function initialize2（）时，映射无法显示。这是给它一个唯一名称的正确方法吗？是的，应该可以（假设您调用该函数）。你的HTML是。您有多个头部和身体标记。那也不行。所有这些都与谷歌地图或谷歌地图API无关，它们都是通用的HTML/javascript。

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']; ?>);