Google Maps API 灰屏 - 尝试了一切答案

【问题标题】：Google Maps API grey screen - tried everythingGoogle Maps API 灰屏 - 尝试了一切
【发布时间】：2020-12-24 06:41:15
【问题描述】：

我正在对待售房屋进行分析，并试图将它们作为对象。我尝试使用其他帖子中的解决方案修改代码，例如：更正缩放、坐标等，但没有任何成功。希望有人能解决这个问题，因为我已经做了一个多星期了。

我正在开发一个 Google Appscript WebApp，所以我不确定这是否会导致错误。

HTML

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <base target="_top">
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoV68jYgCZRuOSao1VFcTJbAW4py7yycs&callback=displayMap"></script>
</head>
<body>
  <div class= "map" id="map-display">
</body>
</html>

CSS

.map{
 height: 400px;
 width: 100%;
 display: none; //initially hidden until the displayMap() function runs
}

Javascript

// other javascript code goes here that produces the `match` results in the next function 
document.getElementById("analysis").addEventListener("click", displayMap); //when a table is clicked, then the map is meant to be displayed

var mapDisplay = document.getElementById("map-display");

let map;
function displayMap(){
  var match = {
    address: "2126 Daly St"
    baths: 1
    beds: 2
    built: 1910
    city: "Los Angeles"
    lat: 34.0702443
    lon: -118.2152669
    lotSize: 3920
    mls: 820000258
    price: 410000
    ref: 573
    state: "CA"
    status: "Active"
    url: "http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566"
    zip: 90031
    }

  var compsList = [
    {address: "2315 Hancock St"
     baths: 2
     beds: 3
     city: "Los Angeles"
     lat: 34.0724244
     lon: -118.2093106
     lotSize: 5500
     mls: "RS20015393"
     price: 680000
     ref: 1505
     saleType: "PAST SALE"
     sf: 1169
     soldDate: "Thu Feb 20 2020 16:00:00 GMT-0800 (Pacific Standard Time)"
     state: "CA"
     status: "Sold"
     url: "http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949"
     zip: 90031
      },
    {address: "2333 Hancock St"
     baths: 2
     beds: 3
     city: "Los Angeles"
     lat: 34.0724248
     lon: -118.2093112
     lotSize: 5700
     mls: "RS20015394"
     price: 640000
     ref: 1510
     saleType: "PAST SALE"
     sf: 1171
     soldDate: "Thu Feb 2 2020 16:00:00 GMT-0800 (Pacific Standard Time)"
     state: "CA"
     status: "Sold"
     url: "http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949"
     zip: 90031
    }
  ];
  var compIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  var options = {
       zoom: 8, 
       center: {lat: match.lat, lng: match.lon},
       mapTypeId: "roadmap"
     }
  map = new google.maps.Map(mapDisplay, options);

  var active = {
     coords: {lat: match.lat, lng: match.lon},
     content: "<h2><a href='"+match.url+"' target='_blank'>"+match.address+"</a></h2>"     
     }
  
  addMarkers(active)  //function should center the map around active and place the "compList" items with a beachflag
  
  var comps = compsList.map(function(c){ //function changes the array to keep only the key/objects needed for the map
     var reformat = {
       coords: {lat: c.lat, lng: c.lon},
       content: "<h2><a href="+c.url+" target='_blank'>"+c.address+" ("+c.distance+" miles away)</a></h2>",
       icon: compIcon
     }
     return reformat
   }).forEach(function(r){ addMarkers(r) }) //send each of the two beach flags to be displayed on map along with the center

   mapDisplay.style.display = "inline-block";
}

function addMarkers(props){
  var marker = new google.maps.Marker({
    position: props.coords, 
    map: map   
  })
  
  if(props.icon){
    marker.setIcon(props.icon)
  }
  
  if(props.content){
    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });
    
    marker.addListener("click",function(){ 
      infoWindow.open(map,marker);
    })
}

当我在 console 上遇到错误时，我尝试将键从 center、position、content 重命名为 setCenter、setPosition、setContent，但我不认为这是对，所以我已经更改了 Google 文档的方式。

我试过改变 div 和overflow:display 的大小，但没有。还有其他可以帮助我实现这一目标的想法吗？我的控制台上没有显示任何错误，因此我没有从 Google Maps API 获得任何反馈......

【问题讨论】：

您是否正确设置了 API 密钥并且您的帐户是否有效？您在控制台中遇到了什么错误？您是否仍然收到任何错误或警告？
@finiteloop，我三次检查了 API 密钥。我没有收到任何警告或错误，只是一个灰屏。
请注意，您的选项中有“输入”而不是“中心”。这会给你一个不同的错误信息还是让你更接近？
我也没有看到 comps 的定义。如果您只是想让地图正常工作，只要var comps = match.comps.map(function(c) 对这个答案不重要，我就可以做到这一点。不过，我没有足够的代码来解决这个问题。
@finiteloop，谢谢你抓住这些。看起来是 lng 拼写错误。我现在看到地图但看不到点，但至少部分问题得到了解决。对于你var comps的问题，你也是对的。应该是var comps = compList.map(etc)，我已经更正了。再次感谢您。

标签： javascript html css google-maps google-maps-api-3

【解决方案1】：

@haby22。正如我在上面的 cmets 中提到的，在您的选项中，您有“输入”而不是“中心”。在您的中心设置和坐标中，您还可以使用 'lgn' 而不是 'lng' 来表示经度。

我还注意到你的 match 和 comp 对象缺少逗号，所以我将它们添加到我的示例中。

我还读到您可以将纬度和经度作为字符串传递，然后转换为解析为浮点数。所以我也这样做了。

我注释掉了你的 var comps = match.comps.map 函数，因为我没有看到 comps 的代码。

编辑我根据反馈添加了此代码，以供将来参考并遵循 Bill & Ted 的卓越代码。 ;)

我也没有你点击的代码，所以我添加了一个 H2，你可以点击它以显示地图。

不确定这是否是您正在寻找的，但这里什么都没有：

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <base target="_top">
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoV68jYgCZRuOSao1VFcTJbAW4py7yycs"></script>
<style>
    .map{
 height: 400px;
 width: 100%;
 display: none; 
 /* initially hidden until the displayMap() function runs */
}
</style>
</head>
<body>
    <h2 id="analysis">Display</h2>
  <div class= "map" id="map-display"></div>

     

    <script>
        // other javascript code goes here that produces the `match` results in the next function 
document.getElementById("analysis").addEventListener("click", displayMap); //when a table is clicked, then the map is meant to be displayed

let mapDisplay = document.getElementById("map-display");

let map;
function displayMap(){
  var match = {
    address: "2126 Daly St",
    baths: 1,
    beds: 2,
    built: 1910,
    city: "Los Angeles",
    lat: "34.0702443",
    lon: "-118.2152669",
    lotSize: 3920,
    mls: 820000258,
    price: 410000,
    ref: 573,
    state: "CA",
    status: "Active",
    url: "http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566",
    zip: 90031,
    }

  var compsList = [
    {address: "2315 Hancock St",
     baths: 2,
     beds: 3,
     city: "Los Angeles",
     lat: "34.0724244",
     lon: "-118.2093106",
     lotSize: 5500,
     mls: "RS20015393",
     price: 680000,
     ref: 1505,
     saleType: "PAST SALE",
     sf: 1169,
     soldDate: "Thu Feb 20 2020 16:00:00 GMT-0800 (Pacific Standard Time)",
     state: "CA",
     status: "Sold",
     url: "http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949",
     zip: 90031,
      },
    {address: "2333 Hancock St",
     baths: 2,
     beds: 3,
     city: "Los Angeles",
     lat: "34.0724248",
     lon: "-118.2093112",
     lotSize: 5700,
     mls: "RS20015394",
     price: 640000,
     ref: 1510,
     saleType: "PAST SALE",
     sf: 1171,
     soldDate: "Thu Feb 2 2020 16:00:00 GMT-0800 (Pacific Standard Time)",
     state: "CA",
     status: "Sold",
     url: "http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949",
     zip: 90031,
    }
  ];
  var compIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  
  
  var options = {
       zoom: 8, 
       center: {lat: parseFloat(match.lat), lng: parseFloat(match.lon)},
       mapTypeId: "roadmap"
     }

  map = new google.maps.Map(mapDisplay, options);



  var active = {
     coords: {lat: parseFloat(match.lat), lng: parseFloat(match.lon)},
     content: "<h2><a href='"+match.url+"' target='_blank'>"+match.address+"</a></h2>"     
     }
  
  addMarkers(active)  //function should center the map around active and place the "compList" items with a beachflag
  
  
  var comps = compsList.map(function(c){ //function changes the array to keep only the key/objects needed for the map
     var reformat = {
       coords: {lat: parseFloat(c.lat), lng: parseFloat(c.lon)},
       content: "<h2><a href="+c.url+" target='_blank'>"+c.address+" ("+c.distance+" miles away)</a></h2>",
       icon: compIcon
     }
     return reformat
   }).forEach(function(r){ addMarkers(r) }) //send each of the two beach flags to be displayed on map along with the center

   mapDisplay.style.display = "inline-block";
}

function addMarkers(props){
  var marker = new google.maps.Marker({
    position: props.coords, 
    map: map   
  })
  
  if(props.icon){
    marker.setIcon(props.icon)
  }
  
  if(props.content){
    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });
    
    marker.addListener("click",function(){ 
      infoWindow.open(map,marker);
    })
}
}
    </script>
</body>
</html>

【讨论】：