Google 地图 API 灰屏 - 尝试了一切

Question

我正在分析待售房屋并尝试从中制造它们并提出反对意见。我试过用其他帖子的解决方案修改代码，例如：更正缩放、坐标等，但没有成功。希望有人能解决这个问题，因为我已经研究了一个多星期了。

我正在开发 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);
    })
}

我试过将 center、position、content 的键重新命名为 setCenter、setPosition、setContent在 console 上出现错误，但我认为这是不对的，所以我已更改为 Google 文档中的错误。

我试过更改 div 和 overflow:display 的大小，但没有任何效果。还有其他想法可以帮助我实现这一目标吗？我的控制台上没有显示任何错误，所以我没有从 Google 地图 API...

得到任何反馈

Answer 1

@haby22。正如我在上面的评论中提到的，在你的选项中你有 'enter' 而不是 'center'。您的中心设置和坐标中的经度也有 '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>

Google 地图 API 灰屏 - 尝试了一切

Google Maps API grey screen - tried everything

html

javascript

css

google-maps

google-maps-api-3