i am new in asp net mvc4 programming and now I am trying to make an auto complete maps location and get the address and latitude and longitude.
Tutorial I am following tutorial from https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete and https://www.youtube.com/watch?v=_kHz9snOS-U ... Both of them works perfectly in a single .html that i make from notepad(i use my google api key).
Problem The problem here is when i implemented the code in my project in C# asp.net mvc4, the auto complete is not working and i tried to F12 in my browser it telling me this :
Tried Solution i've tried this solution Jquery autocomplete not working on ASP.NET MVC 5 it says that it's implement the _layout and i tried to make my layout null but still it doesn't work for me.
Here's my code :
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Test Autocomplete</title>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?key='change it to api key'&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', intilize);
function intilize() {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById("txtautocomplete"));
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
var location = "Address: " + place.formatted_address + "<br/>";
location += "Latitude: " + place.geometry.location.lat() + "<br/>";
location += "Longitude: " + place.geometry.location.lng();
document.getElementById('lblresult').innerHTML = location
});
};
</script>
<span>location:</span><input type="text" id="txtautocomplete" style="width:200px" placeholder="enter the adress" />
<br><label id="lblresult"></label>
<script src="@SiteHelper.GetBaseUrl()/Assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="@SiteHelper.GetBaseUrl()/Assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</body>
</html>
Can you help me why my code doesn't work on .cshtml and how is the solution ?
if (!place.geometry) { console.log('no geometry'); return; }Object {name: "bandung"}