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

问题描述

我阅读了许多有关使多个Google地图显示在单个页面上的文章，但似乎与我的代码无关，后者使用了Google Maps API V3.

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.

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

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.

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

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

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

任何帮助将不胜感激.谢谢.

Any help would be very appreciated. Thanks.

伊恩

推荐答案

您有重复的功能.那样行不通，也不能给它们指定唯一的名称，或者只有一个初始化函数可以初始化两个地图.

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