Question

我正在尝试在我的网站上实施谷歌地图。根据教程，我有必要包括Google API密钥。但是，地图未按预期显示页面加载。救命？

这是我的代码：

FROM_UNIXTIME()

这是我的CSS

 Find('all', array('conditions' => array(
 'userstatus = ? and userdate >= FROM_UNIXTIME(?)', '-1', time())));

Answer 1

尝试添加

html,body { 
   height: 100%;
   margin: 0;
   padding: 0;
}

Answer 2

找到在这里工作的示例的jsfiddle：

https://jsfiddle.net/n8a84wh8/1/

JavaScript的：

var map;
var uluru = {lat: -25.363, lng: 131.044};
var marker;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  }),
  marker = new google.maps.Marker({
     position: uluru,
     map: map
  });
}

HTML：

<div id class="map-container">
  <div id="map" class="map-box"></div>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

CSS：

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.map-container {
    padding-left: 11%; 
    padding-right: 11%;
    width: 100%;
    height: 400px; 
    position: absolute;
    margin-top: 1%;
    margin-bottom: 5%;
}

.map-box {
    height: 100%;
    width: 100%;
 }

Google地图未显示在我的网站中

2 个答案: