1つのページに2つの異なるGoogleマップが表示されていますが、そのうちの1つだけが表示されています

Question

マップごとに異なる緯度と経度の2種類のGoogleマップを追加しました。

私はJavaScriptを使用して非常に良いではないんだけど、私はinitMap機能が今2つの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> 

すべてのヘルプは、この問題を解決するために認識されます。

Answer 1

1つの機能のみを使用してください。私はあなたがinitMap関数を再宣言しようとしているという警告をコンソールに表示していると推測しています。

Answer 2

変更するには、新しいマップにそれは価値だreseting、グローバル変数として関数を宣言している機能の1つの名前、あなたが例えばその一つの名前を変更するためにそれをしなければならないすべては

initmap2第二の機能に名前を付けます