Google map latitude / longitude showing null in geometry - Javascript

Question

Hi I'm using google places api javascript sdk , and want to save the result in my db using ROR - I'm wondering that four day earlier , it was saving the lat/lng successfully but now it's saving as null . Below is my explanation

I've this code in my javascript

places = new google.maps.places.PlacesService(map);
places.nearbySearch(request, callback);

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
      clearMarkers();
//alert(JSON.stringify(results));

$.ajax({
  url: "/myurl",
  data:{
    'google_searched_locations': JSON.stringify(results)
  },
  dataType: "json",
  method: 'post',
  async : false,
  success: function(data){

  }
  });
}

In the callback function when i do console.log(results[0].geometry.location.lng()); it shows me result as 74.30889000000002 while when i do

console.log(results[0]);

Output

geometry
  Object { location=L}
location

L       { lat=function(),  lng=function(),  toString=function(),  more...}
equals  function(a)
j       function(a)
lat     function()
lng     function()
toString function()

which clearly makes sense . But in console of firefox , ajax data parameter showing the data in the following form

[{"geometry":{"location":{}}]

I skipped the other parameters for clarity because all other things are present in the request . But you can see location is totally empty , Why ? and how can i send results[0].geometry.location.lng() values alongwith i.e within location object

Answer 1

It occurs since Nearby Search Requests returns location property of google.maps.LatLng type and in order to save it needs to be serialized explicitly, for that purpose the following function could be used:

• toString() Converts to string representation.

• toUrlValue Returns a string of the form "lat,lng" for this LatLng. We round the lat/lng values to 6 decimal places by default.

You could introduce a new property for storing location string representation for that purpose as demonstrated below:

var results = results.map(function(item){
         item.geometry.locationString = item.geometry.location.toString(); //string represenation of location property
         return item;   
});

Example

function initialize() {
    var pyrmont = new google.maps.LatLng(-33.8665, 151.1956);

    var map = new google.maps.Map(document.getElementById('map'), {
        center: pyrmont,
        zoom: 15,
        scrollwheel: false
    });

    // Specify location, radius and place types for your Places API search.
    var request = {
        location: pyrmont,
        radius: '500',
        types: ['store']
    };

    // Create the PlaceService and send the request.
    // Handle the callback with an anonymous function.
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, function (results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {


           //serialize location to string 
           var results = results.map(function(item){
                item.geometry.locationString = item.geometry.location.toString();
                return item;   
           });

           document.getElementById('output').innerHTML = JSON.stringify(results, null, 2);
        }
    });
}

// Run the initialize function when the window has finished loading.
google.maps.event.addDomListener(window, 'load', initialize);

   html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }

<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places"></script>
<div id="map"></div>
<pre id="output"></pre>