Google Maps APIをブートストラップグリッドオーバーレイに埋め込むにはどうすればよいですか？

-1

イム次のようになり、ウェブページ上で作業：https://imgur.com/a/eW3gK Google Maps APIをブートストラップグリッドオーバーレイに埋め込むにはどうすればよいですか？

そして、私は、ブートストラップグリッドを使用しようとしているが、マップはちょうどのサイズ変更や右列の下に現れ、それが働いていないされていません。

HTML

<!DOCTYPE html> 
    <html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="~/css/custom.css"> 
     <script src="~/js/googleMap.js"></script> 

    </head> 
    <body> 
     <h3>My Google Maps Demo</h3> 
     <div class="row"> 
      <div class="col-md-6">Google Maps</div>  
     </div> 
     <div class="row"> 
      <div class="col-md-6">Contact Information</div> 
      <div class="col-md-6"> 
       <div id="map"></div> 
      </div> 
     </div> 


     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-giuXPLWpnFxLjk&callback=initMap"></script> 
    </body> 
    </html>

CSS

#map { 
    width: 100%; 
    height: 400px; 
    background-color: grey; 
}

function initMap() { 
    var uluru = { lat: 51.957244, lng: 4.570751 }; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map 
    }); 
}

は、どのように私はモックアップに応じてブートストラップグリッドでGoogleマップを使用することができますか？ここで

出典

2017-12-13 Yusuf Cum

チェックこの作業例をhttp://jsbin.com/capetay/edit?output

が更新されたHTMLで、地図と連絡先情報のコンテナは、同じ行にする必要があります

<div class="row body"> 
    <div class="col-sm-6"> 
    <div id="map"></div> 
    </div> 
    <div class="col-sm-6 text-center"> 
    <h4>Contact Information</h4> 
    <ul> 
     <li>ABC</li> 
    </ul> 
    </div> 
</div>

ここでは、同様のコードスニペットです：（で実行してみてくださいフルスクリーン）

function initMap() { 
 
    var uluru = { lat: 51.957244, lng: 4.570751 }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 15, 
 
     center: uluru 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
     position: uluru, 
 
     map: map 
 
    }); 
 
}

#map { 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: grey; 
 
} 
 
.row.body > div { 
 
    padding: 30px; 
 
    border: 1px solid 
 
} 
 
.with-border h3 { 
 
    border: 1px solid black; 
 
    max-width: 300px; 
 
    margin: auto auto 20px auto; 
 
    padding: 15px; 
 
} 
 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <title>Google Maps API in Bootstrap</title> 
 
    </head> 
 
    <body> 
 
    <h3>My Google Maps Demo</h3> 
 
    <div class="row"> 
 
     <div class="col-md-12 text-center with-border"> 
 
     <h3>Google Maps</h3> 
 
     </div>  
 
    </div> 
 
    <div class="row body"> 
 
     <div class="col-sm-6"> 
 
     <div id="map"></div> 
 
     </div> 
 
     <div class="col-sm-6 text-center"> 
 
     <h4>Contact Information</h4> 
 
     <ul> 
 
      <li>ABC</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script> 
 
    </body> 
 
</html>

出典

2017-12-18 04:02:51

Google Maps APIをブートストラップグリッドオーバーレイに埋め込むにはどうすればよいですか？

答えて

関連する問題