多個Google地圖不會在單個頁面上顯示

我已閱讀了許多關於讓多個Google地圖顯示在單個頁面上的不同帖子，但似乎沒有任何關於使用Google Maps API V3的我的代碼。多個Google地圖不會在單個頁面上顯示

我在同一頁面上有兩個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幅不同的地圖都應該在標籤「我們的傳教士」和「國際夥伴」下方顯示。

任何幫助將不勝感激。謝謝。

伊恩

來源

2013-05-16 iananderson

檢查JavaScript控制檯。我收到此警告：'警告：您已在此頁面上多次包含Google Maps API。這可能會導致意外的錯誤。 main.js：42'和這個錯誤'不安全的JavaScript嘗試訪問來自http://tcchurch.com.au/table1/index.php/missions的幀的URL http://player.vimeo.com/video/32423470？肖像= 0。域名，協議和端口必須匹配。' – geocodezip

[3個地圖在一個頁面上]（http://www.geocodezip.com/v3_GoogleEx_polygon-simple_3maps.html） – geocodezip

我已經從代碼中刪除了重複的API以及vimeo視頻，但仍然只顯示一個地圖。 – iananderson

您有重複的功能。這是行不通的，給他們唯一的名字，或者有一個初始化函數初始化這兩個地圖。

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 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 map2 = new google.maps.Map(document.getElementById("map_canvas2"), settings); 
... 
}

來源

2013-05-16 04:37:15 geocodezip

感謝您爲我着想。當我將Map2的函數更改爲：function initialize2（）時，地圖無法顯示。這是給它一個獨特名稱的正確方法嗎？ – iananderson

是的，這應該工作（假設你調用函數）。您的HTML [無效]（http://validator.w3.org/check?uri=http%3A%2F%2Ftcchurch.com.au%2Ftable1%2Findex.php%2Fmissions&charset=%28detect+automatically%29&doctype=Inline&group= 0）。你有多個頭部和身體標籤。那也行不通。這與Google Maps或Google Maps API沒有任何關係，它都是一般的HTML/javascript。 – geocodezip

不僅給不同的名稱功能外，還對全局變量 - 變量，而「變種」的乞討：

指定帖子ID：「地圖」，「初始化」和「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']; ?>);

來源

2013-12-01 19:22:32

多個Google地圖不會在單個頁面上顯示

回答

相關問題