Tips and Tricks in a world of Mix

Posts tagged ‘google autocomplete’

Google maps location , longitude , longitude in MVC without Map display

I have a nested object of address inside presented model of the view
At the View page I add the js functionality of google maps services

http://maps.googleapis.com/maps/api/js?key=GET_YOUR_KEY&sensor=false&libraries=places

function initialize() {
var input = document.getElementById(‘Address_Name’);
var options = {
componentRestrictions: { country: “il” }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, ‘place_changed’, function () {
var place = autocomplete.getPlace();
console.log(JSON.stringify(place));
document.getElementById(‘Address_Name’).value = place.formatted_address;
document.getElementById(‘Address_Latitude’).value = place.geometry.location.lat();
document.getElementById(‘Address_Longitude’).value = place.geometry.location.lng();

});
}
google.maps.event.addDomListener(window, ‘load’, initialize);

 

@Html.LabelFor(model => model.Address.Name, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Address.Name, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Address.Name, “”, new { @class = “text-danger” })

@Html.LabelFor(model => model.Address.Latitude, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Address.Latitude, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Address.Latitude, “”, new { @class = “text-danger” })

@Html.LabelFor(model => model.Address.Longitude, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Address.Longitude, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Address.Longitude, “”, new { @class = “text-danger” })

 

And that’s what you get

 

The json of the response is very rich

 

 

Enjoy

 

 

 

Advertisements

Tag Cloud

%d bloggers like this: