How to get google place api results from autocomplete.getPlace()

Question

I would like to pass the longitude/latitude results from google the places api to my MVC application action route values. I'm not sure how to get it to my route values or how to return the javascript to the html values. Right now

var result = autocomplete.getPlace();

is returning an undefined value. So it doesn't even look like its working even though the autocomplete for places is working fine.

var input = document.getElementById('location');
var options = {
types: ['(cities)'],
componentRestrictions: { country: "us" }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
var t = 2;
var result = autocomplete.getPlace(); //result is undefined
var i = 1;
//var lat = result.geometry.location.lat;
//var lon = result.geometry.location.lon;

Here is my form that has the input box and script tag where the location is found. I'm trying to get the lon/lat values to the route values 5,6

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? v=3.exp&amp;sensor=false&amp;libraries=places"></script>

@{
    var routeValues = new RouteValueDictionary();
    routeValues.Add("Longitude", "5");
    routeValues.Add("Latitude", "6");
}

@using (Html.BeginForm("Results", "Home", routeValues, FormMethod.Post))
{
    <p>
        <input type="text" name="location" id="location" placeholder="Search For A Studio" />
    </p>
    <p>
        <input class="btn btn-primary btn-lg" value='Submit' type="submit"/>
    </p>
}

Here is my action in the controller

public ActionResult Results(string longitude, string latitude)
    {
        var repo = new YogaSpaceRepository();

            /// 1000 Ocean Ave
            DbGeography myLocation = DbGeography.FromText("POINT(-122.453164 37.723057)");
            IQueryable<YogaSpace> spaces = repo.AllWithinDistance(myLocation);


        return View(spaces);
    }

*UPDATE - I can get autocomplete.getPlace() to return data. I had to put it in a javascript function for the onclick event from my submit button. Hope that's the best way to do it! But I can't seem to get the location (longitude/latitude) data from it. Here is what I have, but lat/lon don't seem to have what I'm looking for or maybe I don't know how to pull the coordinates from these two variables.

var input = document.getElementById('location');
var options = {
   types: ['(cities)'],
   componentRestrictions: { country: "us" }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

function getGeometry() {
   var place = autocomplete.getPlace();

   var lat = place.geometry.location.lat;
   var lon = place.geometry.location.lon;
}

Solution 1

You can get lat and lang from geometry.location object through

place.geometry.location.lat()
place.geometry.location.lng()

Solution 2

You were on the right track but since lat and lng are functions of LatLng object, the following example demonstrates how to get lat/lng:

var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lat();

Complete example

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -33.8688, lng: 151.2195 },
        zoom: 13
    });
    var input = /** @type {!HTMLInputElement} */(
        document.getElementById('pac-input'));

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    

    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29)
    });


    autocomplete.addListener('place_changed', function () {
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }

        //displayResult(place);

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
        }
        marker.setIcon(/** @type {google.maps.Icon} */({
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(35, 35)
        }));
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);
        

        var address = '';
        if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
        }

        //infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
        infowindow.setContent('<div><strong>' + "Location(" + place.geometry.location.lat() + "," + place.geometry.location.lng() + ")" + '</strong><br>');
        infowindow.open(map, marker);
    });

}

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

        #map {
            height: 100%;
        }

        .controls {
            margin-top: 10px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 300px;
        }

            #pac-input:focus {
                border-color: #4d90fe;
            }

        .pac-container {
            font-family: Roboto;
        }

 <input id="pac-input" class="controls" type="text"
           placeholder="Enter a location">
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initMap"
            async defer></script>

Solution 3

I know it's an old question, but should be useful to others.

To get geometry proprieties, you need to set "fields" for autocomplete object, like this:

autocomplete.setFields(['address_component', 'geometry']);

To get address_component and geometry details.

This is important to limit the number of data you get and you will billed for by Google APIs.

Read this:

https://developers.google.com/maps/documentation/javascript/places-autocomplete?hl=ja#get_place_information

And this, for getPlace() results:

https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=ja#PlaceResult

Comments

[Aamir Afridi]

Search for The Shard, London Bridge Street, London, United Kingdom :(

[Funn_Bobby]

what if geometry is undefined...but only sometimes?

[Funn_Bobby]

what if geometry is undefined...but only sometimes?