Display Console Log results from Google Map on Screen

Viewed 26

I'm using the Google maps API to find Latitudes and Longitudes from the site addresses that I enter manually. I can look in the console and get the latitudes and longitudes that are generated by the code in JS. That was working for a few addresses, but now I have numerous addresses and is no longer practical. I'm trying to extract the Latitude, Longitude so that I can view it on the screen in html like a table format. I want to be able to copy the address, Lat, and Long. out and paste into another program. It's not practical to do this in the console. So how to extract the information out from the results of get Json into html table? I tried $('#results').append('<p>Latitude: ' + .json.results.geometry.location.lat+'</p>') which results in error 'cannot read properties of undefined.'

 var siteAddress = [

 
{address:"1000 East ST,Phoenix, AZ"},
{address:"1000 West St, Phoenix, AZ"},

]

var map;
// Place Constructor
var Place = function(data) {
    this.name = ko.observable(data.name);
    this.address = ko.observable(data.address);
    
}


//Load Initial Map Object
var initMap = function(data) {


    map = {
        zoom: 12,
        center: new google.maps.LatLng(0,0),
        mapTypeId: 'roadmap'
    };

    
    ko.applyBindings(new ViewModel());

}

var ViewModel = function() {
    var self = this;
       this.placeList = ko.observableArray([]);

       siteAddress.forEach(function(placeItem) {
        self.placeList.push(new Place(placeItem));
      
    });//


    map = new google.maps.Map($('#map')[0], map);
    var marker;
    var infowindow = new google.maps.InfoWindow({
        content: 'none',
        maxWidth: 200


    });
//Automatic LatLngBounds
var bounds = new google.maps.LatLngBounds();

    
    self.placeList().forEach(function(placeItem) {
        $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + placeItem.address() + "&key=",
            function(data) {
                console.table(placeItem.address());
                console.table(data.results[0].geometry.location.lat);
                console.table(data.results[0].geometry.location.lng);
               console.table(data);
              //Results in error- $('#results').append('<p>Latitude : ' + JSON.results[0].geometry.location.lat+ '</p>')
              
               //console.log(JSON.stringify(data));
                var p = data.results[0].geometry.location
                var latitude = p.lat;
                var longitude = p.lng;
                         


                }) //end of placeList json


                //reference for the showWindows function
                placeItem.marker = marker;
                // console.log(placeItem.marker);

            })

    };
0 Answers
Related