顯示多個谷歌地圖在一個頁面

IM使用hpneo gmaps插件：http://hpneo.github.io/gmaps/顯示多個谷歌地圖在一個頁面

，我想使用多張地圖有不同的位置，現在我有這樣的代碼，但它顯示只有第一個地圖

/* Google map */ 
var map1; 
    $(document).ready(function(){ 
     prettyPrint(); 
     map1 = new GMaps({ 
     div: '#map', 
     scrollwheel: false, 
     lat: 54.7181780, 
     lng: 25.2204530, 
     zoom: 16 
     }); 

map1.addMarker({ 
     lat: 54.7181780, 
     lng: 25.2204530, 
     title: 'II "Meistrus" ', 
     icon: '/images/marker.png' 

     }); 
}); 

/* Vilnius */ 
var map2; 
    $(document).ready(function(){ 
     prettyPrint(); 
     map2 = new GMaps({ 
     div: '#vilnius', 
     scrollwheel: false, 
     lat: 54.8900070, 
     lng: 23.9255120, 
     zoom: 10 
     }); 

map2.addMarker({ 
     lat: 54.8900070, 
     lng: 23.9255120, 
     title: 'II "Meistrus" ', 
     icon: '/images/marker.png' 

     }); 
});

這裏是小提琴代碼：http://jsfiddle.net/337T7/ - 工作正常，但如果我只想顯示「維爾紐斯」地圖，並刪除<div id="map" class="map"></div>沒有一個地圖顯示。

什麼即時做錯了？

來源

2014-03-13 Tomas Kleinotas

你可以發佈一個例子在jsfiddle之類的？ – noel

在這裏：在這一切工作正常：http://jsfiddle.net/337T7/但如果我想只顯示地圖「維爾紐斯」它不顯示（刪除

並再次運行） –

由於div不存在，所以第一次調用會拋出一個錯誤，即取消剩餘的調用。你要檢查，如果DIV存在：http://jsfiddle.net/337T7/1/

/* Google map */ 
var map1; 
$(document).ready(function(){ 
    if ($('#map').length) { 
     prettyPrint(); 
     map1 = new GMaps({ 
      div: '#map', 
      scrollwheel: false, 
      lat: 54.7181780, 
      lng: 25.2204530, 
      zoom: 16 
     }); 

     map1.addMarker({ 
      lat: 54.7181780, 
      lng: 25.2204530, 
      title: 'II "Meistrus" ', 
      icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png' 

     }); 
    } 
}); 

/* Vilnius */ 
var map2; 
$(document).ready(function(){ 
    if ($('#vilnius').length) { 
     prettyPrint(); 
     map2 = new GMaps({ 
     div: '#vilnius', 
     scrollwheel: false, 
     lat: 54.8900070, 
     lng: 23.9255120, 
     zoom: 10 
     }); 

    map2.addMarker({ 
     lat: 54.8900070, 
     lng: 23.9255120, 
     title: 'II "Meistrus" ', 
     icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png' 

     }); 
    } 
});

來源

2014-03-13 17:21:16 noel

更具體地說，gmaps是投擲'沒有元素定義'的錯誤。 – noel

你應該看看Chrome的開發工具，或Firefox等。控制檯可以幫助您找到這樣的錯誤，並告訴您它們在哪裏發生。 https://developers.google.com/chrome-developer-tools/ – noel

謝謝！現在所有工作正常;） –

你應該檢查的div是否存在嘗試調用它的一個功能之前。最簡單的方法，這樣做，是通過將代碼中

if(document.getElementById('map)){ 
    //your code 
}

而且，我認爲這將是把代碼塊都成一個單一的document.ready

所以生成的代碼會好習慣是這樣的：

var map1, map2; 
$(document).ready(function(){ 
    prettyPrint(); 
    if(document.getElementById('map')){ 
    map1 = new GMaps({ 
     div: '#map', 
     scrollwheel: false, 
     lat: 54.7181780, 
     lng: 25.2204530, 
     zoom: 16 
    }); 
    map1.addMarker({ 
     lat: 54.7181780, 
     lng: 25.2204530, 
     title: 'II "Meistrus" ', 
     icon: '/images/marker.png' 
    }); 
    } 

    if(document.getElementById('vilnius')){ 
    prettyPrint(); 
    map2 = new GMaps({ 
     div: '#vilnius', 
     scrollwheel: false, 
     lat: 54.8900070, 
     lng: 23.9255120, 
     zoom: 10 
    }); 
    map2.addMarker({ 
     lat: 54.8900070, 
     lng: 23.9255120, 
     title: 'II "Meistrus" ', 
     icon: '/images/marker.png' 
    }); 
    } 
});

我相信，如果DIV實際上不是在HTML通過另一種方式會更優雅不具有與執行的地圖之一的代碼比如果格測試如果有。但我不知道你的項目結構如何。

來源

2014-03-13 17:29:01 Sheraff

你救了我的命！ :) –

顯示多個谷歌地圖在一個頁面

回答

相關問題