如何在Bootstrap网格覆盖中嵌入Google Maps API?

问题描述 投票:-1回答:1

我正在开发一个看起来像这样的网页:https://imgur.com/a/eW3gK

我正在尝试使用bootstrap网格,但地图只是没有调整大小并显示在列的正下方而且它不起作用。

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;
}

JS

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
    });
}

如何根据模型使用带有Bootstrap网格的Google地图?

javascript html google-maps-api-3 bootstrap-4
1个回答
0
投票

检查这个工作示例http://jsbin.com/capetay/edit?output

这是更新的html,Map和Contact Info容器应该在同一行

<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>
© www.soinside.com 2019 - 2024. All rights reserved.