javascript - Google Maps API JavaScript - 无显示，无错误

Question

我需要一些指导。我已经使用 Google Maps Javascript API 构建了 map ，并且在加载时没有收到任何错误 - 但 map 未显示。 DOM 元素处于事件状态； javascript 文件加载； html 和 css 样式都已到位。 API key 处于事件状态，并且仅限于我的域。所以我真的不确定我做错了什么。您可以转到 https://www.copelandcompany.com/visit-us/ 查看此问题的现场演示。 , 并在首屏下方滚动。那个空白应该是 map 。

虽然现在没有错误，但当我将“async defer”添加到 Google Maps javascript 时，或者当我将“callback:initMap”添加到 API url 时，确实会抛出错误。所以我删除了那些东西，没有脚本错误。

但是 - 没有 map 。

这是我的代码。感谢任何帮助，谢谢!

在页眉底部加载:

<script src="https://www.copelandcompany.com/wp-content/themes/pinnacle_child/cco-map.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YESILOADEDMYAPIKEYHERE"></script>

这是我的 cco-map.js 文件代码:

// Google Maps Code
function initMap () {
  var cco_office = {lat: 26.687469, lng: -80.054225};
  var cco_map = new google.maps.Map(document.getElementById('cco-map'), {
    zoom: 15,
    center: cco_office
  });

  var contentString = 
      '<div id="cco-marker">'+
      '<img src="/wp-content/uploads/2015/04/DSC_0195.jpg" />'+
      '<h3 style="font-family: Raleway;">Copeland & Co. Real Estate</h3>'+
      '<div id="bodyContent">'+
      '<b>Address:</b> 2822B S Dixie Hwy, West Palm Beach, FL 33405' +
      '<p><b>Phone:</b> 561-500-LIST (5478)<br>'+
      '<b>Email:</b> hello@cpld.co</br>'+
      '<b>Hours:</b> Monday-Friday, 9:00 a.m. to 5:00 p.m.<br>'+
      '<div class="links"><a href="https://www.google.com/maps/dir//Copeland+%26+Co.+Real+Estate,+2822+S+Dixie+Hwy,+West+Palm+Beach,+FL+33405/@26.687469,-80.054225,15z/data=!4m8!4m7!1m0!1m5!1m1!1s0x88d8d7aa6a149623:0xde07abb7d8b409f4!2m2!1d-80.054225!2d26.687469" target="_blank" title="Directions" />Get Directions</a> | <a href="https://www.google.com/maps/place/Copeland+%26+Co.+Real+Estate/@26.6874738,-80.0564137,17z/data=!4m7!3m6!1s0x0:0xde07abb7d8b409f4!8m2!3d26.687469!4d-80.054225!9m1!1b1" target="_blank" title="Reviews" style="color: #EB6E00;" />Read Our 5-Star Reviews</a></div>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var cco_marker = new google.maps.Marker({
    position: cco_office,
    map: cco_map,
    title: 'Copeland & Co. Real Estate'
  });
  cco_marker.addListener('click', function() {
    InfoWindow.open(cco_map, cco_marker);
  });
}

由 style.css 加载:

#cco-map {
    width: 100%;
    height: 400px;
}

还有我的 HTML:

<div id="cco-map"></div>

Answer 1

在html中添加样式

<style>
 #cco-map{
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

它会显示 map