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

Vadim Gremyachev · Accepted Answer · 2015-10-19 08:42:46Z

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>

Dr.Molle · Accepted Answer · 2015-10-19 08:40:06Z

1

Functions(like e.g. lat() and lng() in this case ) may not be transported via JSON.

You must first parse result and create some custom values with the the desired values to be able to transport latitude and longitude via JSON

answered Oct 19, 2015 at 8:40

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

1 Comment

Mani Over a year ago

dear you explained the logic correctly but @vadim also gave the code alongwith the logic , that's why i'm marking that as answer but your's is also 100% correct

Collectives™ on Stack Overflow

Google map latitude / longitude showing null in geometry - Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related