のGoogleマップをGoogleマップにブートストラップとコードの上

Question

var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 16, 
 
      center: new google.maps.LatLng(18.511325, 73.820176), 
 
      mapTypeId: 'roadmap' 
 
     }); 
 

 
     var iconBase = 'img/contactus/'; 
 
     var icons = { 
 
      info: { 
 
      icon: iconBase + 'map.png' 
 
      } 
 
     }; 
 

 
     var features = [ 
 
      { 
 
      position: new google.maps.LatLng(18.511325, 73.820176), 
 
      type: 'info' 
 
      } 
 
     ]; 
 

 
     // Create markers. 
 
     features.forEach(function(feature) { 
 
      var marker = new google.maps.Marker({ 
 
      position: feature.position, 
 
      icon: icons[feature.type].icon, 
 
      map: map 
 
      }); 
 
     }); 
 
     }

#map{ 
 
    margin-left: 20%; 
 
    height:100; 
 
    }

<script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9rik1af5EY8G-fO6KNukN0-ROACLhAPg&callback=initMap"> 
 
    </script> 
 

 
<div id="map" class="map" style="width: 65%; height:40%"></div>

ハローをされて表示されていない、私はそれで私のプロジェクト&表示カスタムロゴ内のGoogleマップを統合しています。しかし私に地図を表示していない私はbootstrap.butを使用しています。検査要素&のチェックを外してください：相対的な位置にマップが表示されていますが、正しい方法で表示されません。

Answer 1

私はフィドルを作成し、あなたのCSSを修正しました。唯一の問題はCSSでした。ロード後にマップが非表示になっています。ここでのCSSは次のとおりです。

#map{ 
    position:fixed !important; 
    display:block !important; 
    width: 100%; 
    height: 100%; 
} 

Answer 2

i hope it will works , just do in the below way, remove all inline css and 
add a height: 500px; 
<style> 
    #map{ 
     margin-left: 20%; 
     height:500px; 
     } 
</style> 
<script> 
    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 16, 
     center: new google.maps.LatLng(18.511325, 73.820176), 
     mapTypeId: 'roadmap' 
    }); 

    var iconBase = 'img/contactus/'; 
    var icons = { 
     info: { 
     icon: iconBase + 'map.png' 
     } 
    }; 

    var features = [ 
     { 
     position: new google.maps.LatLng(18.511325, 73.820176), 
     type: 'info' 
     } 
    ]; 

    // Create markers. 
    features.forEach(function(feature) { 
     var marker = new google.maps.Marker({ 
     position: feature.position, 
     icon: icons[feature.type].icon, 
     map: map 
     }); 
    }); 
    } 
</script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9rik1af5EY8G- 
    fO6KNukN0-ROACLhAPg&callback=initMap"> 
    </script> 

    <div id="map" class="map"></div>