多个Google地图不会在单个页面上显示 [英] Multiple Google Maps won't display on single page

问题描述

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

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

我尝试了删除行;

 < meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/ > 
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script> 
  

从第二个标签中删除，这样就不会在同一个页面上重复，但是没有工作。

页面可以在这里查看： http://tcchurch.com.au/table1/index.php/missions

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

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

Ian

解决方案

这是行不通的，给他们唯一的名字，或者有一个初始化函数来初始化这两个地图。

  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）; 
 .... 
} 
 
函数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）; 
 ... 
} 
  

I have read many different posts about getting multiple Google maps to display on a single page, but none seem to related to my code, which uses the Google Maps API V3.

I have 2 Google Maps on the same page, but in different tabs. I have duplicated the code for Map1 and pasted it into a 2nd tab to create Map2. I have then changed the "var map" and "map_canvas" id's for Map2, but when published, only Map2 displays on the page.

I tried the option of deleting the lines;

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

from the 2nd tab so that it wasn't repeated on the same page, but that didn't work.

The page can be viewed here: http://tcchurch.com.au/table1/index.php/missions

The 2 different maps are supposed to display under the tabs "Our Missionaries" and "International Partners".

Any help would be very appreciated. Thanks.

Ian

解决方案

You have duplicate functions. That won't work, give them unique names as well, or have one initialize function that initializes both maps.

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

这篇关于多个Google地图不会在单个页面上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！