Question

我可以使用一些指导。我使用Google Maps Javascript API构建了一个地图，我在加载时没有收到任何错误 - 但是地图没有显示。 DOM元素是活动的;加载javascript文件; html和css样式都到位。 API密钥处于活动状态，并且仅限于我的域。所以我真的不确定我做错了什么。您可以转到https://www.copelandcompany.com/visit-us/，然后在屏幕下方滚动来查看此问题的实时演示。那个空白区域应该是地图。

虽然现在没有错误，但是当我向Google Maps javascript添加“async defer”时，或者当我向API网址添加“callback：initMap”时，会出错的是什么。所以我删除了那些东西，并且没有脚本错误。

但是 - 没有地图。

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

加载在标题的底部：

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

它会显示地图

Answer 2

我曾经在我的项目中使用谷歌地图..我希望这可以帮助你

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

<div>
   <input id="lat" type="text" size="30" class="form-control" name="Latitude" />
   <input id="lng" type="text" size="30" class="form-control" name="Longitude" />
</div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCiH9aX_KI44VpanKHYDE28s-4jTv9B8EM&sensor=true"></script>

<script type="text/javascript">
    function loadmap() {
        var medan = new google.maps.LatLng(3.58727, 98.67491);
        var marker;
        var map;

        var mapOptions = {
            zoom : 13,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            center : medan
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        marker = new google.maps.Marker({
            map : map,
            draggable : true,
            animation : google.maps.Animation.DROP,
            position : medan
        });
        google.maps.event.addListener(marker, 'click', toggleBounce);
        google.maps.event.addListener(marker, 'dragend', function() {
            var markerlocation = marker.getPosition();
            $('#lat').val(markerlocation.lat().toString());
            $('#lng').val(markerlocation.lng().toString());
        });
    }

    function toggleBounce() {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

    loadmap();
</script>

Answer 3

要解决您的问题，我建议您安装适用于Chrome浏览器的Google Maps API Checker扩展程序：

https://chrome.google.com/webstore/detail/google-maps-api-checker/mlikepnkghhlnkgeejmlkfeheihlehne

打开您的网页https://www.copelandcompany.com/visit-us/并查看Google Maps API检查器的内容

如您所见，您尝试在同一页面上加载Maps JavaScript API两次。更重要的是，第一个网址

https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=AIzaSyBN...

加载API的发布版本，而第二个URL

https://maps.googleapis.com/maps/api/js?key=AIzaSyCBe8iI....&callback=initMap

加载API的实验版本。您将发布版和实验版混合在同一页面上，并在两个调用中使用不同的API密钥。我认为这种版本的混合可能无法正常工作。

现在检查浏览器控制台，你说没有错误，但我可以看到其中两个

您只需加载Google Maps JavaScript API一次，查看版本控制文档

https://developers.google.com/maps/documentation/javascript/versions

我希望这有帮助！

Answer 4

我解决了这个问题。这对我来说是不为人知的，但显然你必须在HTML中将div标签和API调用一起插入，例如背靠背。问题是我在标头中加载API调用和我的coo-map.js文件，而不是使用map div加载API调用。

对于那些对我有同样误解的人来说，应该是这样的：

在标题中：

<script src="https://www.copelandcompany.com/wp-content/themes/pinnacle_child/cco-map.js"></script>

在HTML中：

<div id="cco-map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY?callback=initMap"></script>

在CSS中：

<style>
 #cco-map{
   width: 100%;
   height: 400px; */THIS REQUIRES A DESIGNATED HEIGHT TO LOAD/*
   background-color: grey;
 }
</style>

AND，在一个.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);
  });
}

一切都好。谢谢大家。

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

4 个答案: