Google Maps API 灰屏 - 尝试了一切

Question

I am working on analyzing homes for sale and trying to make them from and object.我正在分析待售房屋，并试图从和反对它们。 I've tried modifying the code with solutions from other posts, such as: correcting zoom, coordinates, etc. without any success.我尝试使用其他帖子中的解决方案修改代码，例如：更正缩放、坐标等，但没有成功。 Hoping someone can figure this out since I've been at it for over a week.希望有人能解决这个问题，因为我已经做了一个多星期了。

I am working on a Google Appscript WebApp so I'm not sure if this is causing the errors.我正在开发一个 Google Appscript WebApp，所以我不确定这是否是导致错误的原因。

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

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

Javascript 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);
    })
}

I've tried renaiming the keys from center , position , content to setCenter , setPosition , setContent when I got an error on console but I don't think that's right so I've changed to how the Google documentation has it.当我在console上遇到错误时，我尝试将键从center 、 position 、 content命名为setCenter 、 setPosition 、 setContent ，但我认为这是不对的，所以我已更改为 Google 文档的方式。

I've tried changing the size of the div and overflow:display but nothing.我试过改变 div 的大小和overflow:display但什么也没有。 Any other ideas that can help me get this going?任何其他想法可以帮助我做到这一点？ No errors show up on my console so I'm not getting any feedback from Google Maps API....我的控制台上没有显示任何错误，所以我没有从 Google Maps API 得到任何反馈......

Answer 1

@haby22. @哈比22。 As mentioned in my comments above, in your options you have 'enter' instead of 'center'.正如我在上面的评论中提到的，在您的选项中，您有“输入”而不是“中心”。 You also have 'lgn' instead of 'lng' for longitude in your center settings, and also in your coords.在中心设置和坐标中，经度也使用 'lgn' 而不是 'lng'。

I also noticed that your match and comp objects were missing commas, so I added them to my example.我还注意到您的 match 和 comp 对象缺少逗号，因此我将它们添加到我的示例中。

I also read that you can pass latitude and longitude as a string then convert to parse to float.我还读到您可以将纬度和经度作为字符串传递，然后转换为解析为浮点数。 So I have done that also.所以我也这样做了。

I commented out your var comps = match.comps.map function because I do not see the code for comps.我注释掉了你的var comps = match.comps.map函数，因为我没有看到 comps 的代码。

EDIT I added this code back based on feedback just for future reference and to follow Bill & Ted's code of excellence.编辑我根据反馈添加了此代码，仅供将来参考并遵循 Bill & Ted 的卓越代码。 ;) ;)

I also do not have the code you click on so I added an H2 that you can click for the map to appear.我也没有你点击的代码，所以我添加了一个 H2，你可以点击它来显示地图。

Not sure if this is what you are looking for but here goes nothing:不确定这是否是您要查找的内容，但这里什么也没有：

 <!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 Maps API 灰屏 - 尝试了一切

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-09-05 06:26:41

Google Maps API 灰屏 - 尝试了一切

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-09-05 06:26:41

解决方案1
1 已采纳 2020-09-05 06:26:41