兩個不同的谷歌地圖在一個頁面上，但其中只有一個顯示

-1

我爲每張地圖添加了兩個不同的谷歌地圖，它們具有不同的緯度和經度，但只有一個地圖顯示在前端。兩個不同的谷歌地圖在一個頁面上，但其中只有一個顯示

我不是很好用JavaScript，但我假設initMap功能，必須創建成一個功能，因爲現在有兩個initMap功能，我認爲這是造成問題的原因，如果我不是這裏完全錯了。

的Javascript：

<script> 
    // You can set control options to change the default position or style of many 
    // of the map controls. 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('osloAirport'), { 
     zoom: 15, 
     center: {lat: 60.21048, lng: 11.06702}, 
     mapTypeControl: true, 
     scrollwheel: false, 
     draggable: !("ontouchend" in document),  

     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     mapTypeIds: ['roadmap', 'terrain'] 
     } 
    }); 
    } 
</script> 

<script> 
    // You can set control options to change the default position or style of many 
    // of the map controls. 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('torpAirport'), { 
     zoom: 15, 
     center: {lat: 59.18245, lng: 10.25691}, 
     mapTypeControl: true, 
     scrollwheel: false, 
     draggable: !("ontouchend" in document),  

     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     mapTypeIds: ['roadmap', 'terrain'] 
     } 
    }); 
    } 
</script>

HTML：

<div class="container"> 
     <div class="row text-center"> 
      <div class="col-md-6 col-xs-12"> 
      <!--<img style="margin: 0 auto;" src="img/team/1.jpg" class="img-responsive" alt="">--> 
      <div id="osloAirport" style="width:auto;height:265px;margin-top: 20px;"></div> 
      <div class="airports"> 
       <h4 class="service-heading"><span>Oslo</span> Airport</h4> 
       <p class="service-second-heading">Dummy text</p> 
       <p class="text-muted">This is just dummy text</p> 
      </div> 
      </div> 
      <div class="col-md-6 col-xs-12"> 
      <!--<img style="margin: 0 auto;" src="img/team/2.jpg" class="img-responsive" alt="">--> 
      <div id="torpAirport" style="width:auto;height:265px;margin-top: 20px;"></div>     
      <div class="airports">         
       <h4 class="service-heading"><span>Sandefjord Torp</span> Airport</h4> 
       <p class="service-second-heading">Dummy text</p> 
       <p class="text-muted">This is just dummy text.</p> 
      </div> 
      </div> 
     </div> 
    </div>

任何幫助表示讚賞，以解決這個問題。

來源

2016-08-27 NohmanJ

嘗試使用只有一個功能。我猜測在控制檯中有一個警告，告訴你你正在嘗試重新聲明函數initMap。

來源

2016-08-27 17:33:06 vincenth

正確，我得到這個錯誤'InvalidValueError：initMap不是函數'。你能告訴我怎樣才能把它變成一個功能嗎？我會很感激！ – NohmanJ

你可以重命名兩個函數initOsloMap和initTorpMap，然後創建這個函數：function initMap（）{initOsloMap（）; initTorpMap（）;} – vincenth

更改您聲明一個函數作爲一個全局變量，然後正在重置它的價值，新地圖的功能之一，名稱所有你需要做的是重新命名他們中的一個，例如命名initmap2

第二功能

來源

2016-08-27 17:35:17

兩個不同的谷歌地圖在一個頁面上，但其中只有一個顯示

回答

相關問題