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

 

	{
	"address_components": [
	{
	"long_name": "Mazkeret Batya",
	"short_name": "Mazkeret Batya",
	"types": [
	"locality",
	"political"
	]
	},
	{
	"long_name": "Rehovot",
	"short_name": "Rehovot",
	"types": [
	"administrative_area_level_2",
	"political"
	]
	},
	{
	"long_name": "Center District",
	"short_name": "Center District",
	"types": [
	"administrative_area_level_1",
	"political"
	]
	},
	{
	"long_name": "Israel",
	"short_name": "IL",
	"types": [
	"country",
	"political"
	]
	}
	],
	"adr_address": "<span class=\"locality\">Mazkeret Batya</span>, <span class=\"country-name\">Israel</span>",
	"formatted_address": "Mazkeret Batya, Israel",
	"geometry": {
	"location": {
	"lat": 31.853167,
	"lng": 34.84242100000006
	},
	"viewport": {
	"south": 31.8222289,
	"west": 34.82844890000001,
	"north": 31.8593341,
	"east": 34.86031400000002
	}
	},
	"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png&quot;,
	"id": "64a45d4c17b261746de71b1a5923c94f7ddea863",
	"name": "Mazkeret Batya",
	"photos": [
	{
	"height": 3840,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/105898321971165954625/photos\">דניאל אוחיון</a>"
	],
	"width": 2160
	},
	{
	"height": 2988,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/104158797614440562732/photos\">שלמה יוסף</a>"
	],
	"width": 5312
	},
	{
	"height": 2322,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/110489628575778674882/photos\">Tal Gvili</a>"
	],
	"width": 4128
	},
	{
	"height": 2976,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/114445674325122225621/photos\">Chen Malobani</a>"
	],
	"width": 3968
	},
	{
	"height": 3024,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/111801729543809282059/photos\">Ariel Manor</a>"
	],
	"width": 4032
	},
	{
	"height": 3120,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/111268777088394031859/photos\">sharon izhayek nadel</a>"
	],
	"width": 4160
	},
	{
	"height": 4128,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/103516936862810354156/photos\">Rebgaya Rebgaya</a>"
	],
	"width": 3096
	},
	{
	"height": 3024,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/110245296055232141387/photos\">קובי בשה</a>"
	],
	"width": 4032
	},
	{
	"height": 2080,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/105803041349046432521/photos\">Shoham Even</a>"
	],
	"width": 4160
	},
	{
	"height": 2988,
	"html_attributions": [
	"<a href=\"https://maps.google.com/maps/contrib/111801729543809282059/photos\">Ariel Manor</a>"
	],
	"width": 5312
	}
	],
	"place_id": "ChIJD6srcPW3AhURV_icJ0eT6pE",
	"reference": "CmRbAAAA2GRxpKuvXhSS-R7Ug7XjxWguWHc6Dy8d1-AqlMIGuiNR4JiXlif1zwNMhmjatMj5Sbau5dTnuQatwQRQMNgx5oq3jv8FOcdrpTsUgPal7LwRR1989Yd6Zfv0JC2QKSH3EhCpBWdhaU1QrN2Z2ZCKXNvhGhRkETDjcoNbdd16R600oZmSu0EKDg",
	"scope": "GOOGLE",
	"types": [
	"locality",
	"political"
	],
	"url": "https://maps.google.com/?q=Mazkeret+Batya,+Israel&ftid=0x1502b7f5702bab0f:0x91ea9347279cf857&quot;,
	"utc_offset": 180,
	"vicinity": "Mazkeret Batya",
	"html_attributions": [
	]
	}

view raw

Google maps autocomplete getPlace response example

hosted with ❤ by GitHub

 

Enjoy