0

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.

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

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.

I've tried changing the size of the div and overflow:display but nothing. 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....

haby22
  • 77
  • 8
  • Did you set up your API keys correctly and is your account active? What error were you getting in the console? Are you still getting any errors or warnings? – finiteloop Sep 05 '20 at 05:00
  • @finiteloop, i triple checked the API key. I am not getting any warnings or errors, just a grey screen. – haby22 Sep 05 '20 at 05:13
  • Are you showing all of your code? – finiteloop Sep 05 '20 at 05:29
  • @finiteloop this is all the code that pertains to the map functionality. There are few hundreds of lines of other code and server-side Code.gs. – haby22 Sep 05 '20 at 05:53
  • I've also tried to adapt the code from this example of mapping multiple points but also get the grey screen. https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example – haby22 Sep 05 '20 at 05:54
  • 2
    notice that you have 'enter' in your options instead of 'center'. Does that give you a different error message or get you closer? – finiteloop Sep 05 '20 at 06:12
  • Also notice that you have 'lgn' and not 'lng' for longitude – finiteloop Sep 05 '20 at 06:13
  • 1
    I also don't see comps defined. If you are just trying to get the map to work I can get that to happen as long as the ```var comps = match.comps.map(function(c)``` is not important to this answer. I don't have enough code to work that though. – finiteloop Sep 05 '20 at 06:20
  • 1
    @finiteloop, thank you for catching those. It looks like it was the `lng` being misspelled. I see the map now but not the points, but at least part of the problems is solved. To your question of `var comps`, you are also correct. It should be `var comps = compList.map`(etc), I've correct that. Thank you again. – haby22 Sep 05 '20 at 06:26
  • I am betting you have got this under control now, but when making a quick update to the code based on your feedback about the comps/compList.map the marker is working on that now also. I am getting a CORS error but I don't think that will be a problem when you test locally. Have a good night and keep on earning the eye-strain! :) – finiteloop Sep 05 '20 at 06:50

1 Answers1

1

@haby22. 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.

I also noticed that your match and comp objects were missing commas, so I added them to my example.

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.

EDIT I added this code back based on feedback just for future reference and to follow Bill & Ted's code of excellence. ;)

I also do not have the code you click on so I added an H2 that you can click for the map to appear.

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>
finiteloop
  • 483
  • 4
  • 14