Jquery Mobile未加載谷歌地圖的多個實例

Question

我在jquery mobile的科爾多瓦項目中工作，我需要多個地圖。 問題是，當一個地圖加載時，另一個dosn't，我知道這是因爲我觸發API時，我需要它，但我不能讓它適用於多個地圖。

var app = { 
    initialize: function() { 
    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false); 
    }, 
    onDeviceReady: function() { 
    this.receivedEvent('deviceready'); 
    }, 
    receivedEvent: function(id) { 
    var parentElement = document.getElementById(id); 
    var listeningElement = parentElement.querySelector('.listening'); 
    var receivedElement = parentElement.querySelector('.received'); 
    listeningElement.setAttribute('style', 'display:none;'); 
    receivedElement.setAttribute('style', 'display:block;'); 
    console.log('Received Event: ' + id); 
    } 
}; 
document.addEventListener("backbutton", function(e){ 
    if($.mobile.activePage.is('#homepage')){ 
    navigator.app.exitApp(); 
    } 
    else { 
    navigator.app.backHistory() 
    } 
}, false); 
app.initialize(); 
init = function() { 
var viafin = {lat: -38.0183981, lng: -57.5428156}; 
var brut = {lat: -26.976732, lng: -48.638033}; 
/* 
var sivara = {lat:, lng:}; 
var hmplaza = {lat:, lng:}; 
var hamburgo = {lat:, lng:}; 
*/ 
var image = 'img/map_marker.png'; 

var map2 = new google.maps.Map(document.getElementById('map_brut'), { 
    zoom: 14, 
    center: brut, 
    disableDefaultUI: true 
}); 
var map = new google.maps.Map(document.getElementById('map_viafin'), { 
    zoom: 14, 
    center: viafin, 
    disableDefaultUI: true 
}); 
var marker2 = new google.maps.Marker({ 
    position: brut, 
    map: map2, 
    icon: image 
}); 
var marker = new google.maps.Marker({ 
    position: viafin, 
    map: map, 
    icon: image 
}); 

} 
function callmap() { 
    if (typeof google === 'object' && typeof google.maps === 'object') {} else { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(script); 
    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCKxYBGN7mcxj81NbByKBCvsEWJhIYOmEU&callback=init"; 
    } 
} 
$(document).on('pageshow', '#nosotros',function(event){callmap()}); 

$(document).on('pageshow', '#hotel1',function(event){callmap()}); 
$(document).on('pageshow', '#hotel2',function(event){callmap()}); 
$(document).on('pageshow', '#hotel3',function(event){callmap()}); 
$(document).on('pageshow', '#hotel4',function(event){callmap()}); 

$(document).ready(function(){ 
    var video = document.getElementById('video'); 
    var source = document.createElement('source'); 
    source.setAttribute('src', 'http://hoffmannestudio.com/viafin/etd.mp4'); 
    $("#vtitulo").html("Elegi tu destino"); 
    video.appendChild(source); 
    $("#video1").click(function(){ 
    video.pause(); 
    $("#vtitulo").html("Elegi tu destino"); 
    $("#video").attr("poster", "img/fiestas.jpg"); 
    source.setAttribute('src', 'http://hoffmannestudio.com/viafin/etd.mp4'); 
    video.load(); 
    }); 
    $("#video2").click(function(){ 
    video.pause(); 
    $("#vtitulo").html("Eclipse Savana"); 
    $("#video").attr("poster", "img/camboriu.jpg"); 
    source.setAttribute('src', 'http://hoffmannestudio.com/viafin/es.mp4'); 
    video.load(); 
    }); 
}); 

Answer 1

你不發表您的CSS，但我相信你已經知道了（從谷歌地圖文檔）：

/*始終設置地圖的高度明確定義DIV 的大小包含地圖的元素。 */

除此之外，問題是關於應使用哪個JQM事件來顯示地圖。我建議pageshow事件，因爲在這一點上，地圖容器是可見的所需的大小。然後，只需跟蹤哪些地圖已經被初始化，以避免多次下載腳本，並避免多次創建地圖。

會有很多的可能性，以達到你想要什麼，我的建議如下：

<div data-role="page" id="page-viafin"> 
    <div role="main" class="ui-content"> 
     <div id="map_viafin" class="map"></div> 
    </div> 
    </div> 
    <div data-role="page" id="page-brut"> 
    <div role="main" class="ui-content"> 
     <div id="map_brut" class="map"></div> 
    </div> 
    </div> 

CSS的地圖容器（改變大小，只要你喜歡：

有兩頁樣品）：

.map { 
    width: 300px; 
    height: 300px; 
} 

的JavaScript：

/* Separate initialization for each map */ 
function init_viafin() { 
var viafin = {lat: -38.0183981, lng: -57.5428156}; 
var map = new google.maps.Map(document.getElementById('map_viafin'), { zoom: 14, center: viafin }); 
var marker = new google.maps.Marker({ position: viafin, map: map }); 
} 
function init_brut() { 
var brut = {lat: -26.976732, lng: -48.638033}; 
var map = new google.maps.Map(document.getElementById('map_brut'), { zoom: 14, center: brut }); 
var marker = new google.maps.Marker({ position: brut, map: map }); 
} 
/* Download & initialize map, or just only initialize map */ 
function callmap(map) { 
    if (typeof google === 'object' && typeof google.maps === 'object') { 
    map(); 
    } else { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(script); 
    script.src = "https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY]&callback="+map.name; 
    } 
} 
/* Keep track of which maps have been already initialized */ 
var cases = { "page-viafin": init_viafin, "page-brut": init_brut}; 
/* Use pageshow, as you already did in your post */ 
$(document).on("pageshow", function(e) { 
    var pageId = e.target.id; 
    if(cases[pageId]) { 
     callmap(cases[pageId]); 
     cases[pageId] = null; 
    } 
});