I want to use google maps Api for search purposes in my application to do this i do the following things. I have included JavaScript code at the bottom of my Blade file. Here is my JavaScript for
JavaScript
x
10
10
1
<script>
2
function initialize() {
3
4
var input = document.getElementById('myAddressBar');
5
var autocomplete = new google.maps.places.Autocomplete(input);
6
}
7
8
google.maps.event.addDomListener(window, 'load', initialize);
9
</script>
10
And i have included the Google Api with my key like this in my head Tag
JavaScript
1
8
1
<script src="js/jquery.min.js"></script>
2
3
<script src="https://maps.googleapis.com/maps/api/js? key=AIzaSyBROO3Md6_fZD5_fd1u8VTlRxd4VdJnAWU&libraries=places"
4
async defer></script>
5
<script>
6
function initMap(){}
7
</script>
8
But problem is that it is works when i login or logout. As i refresh the page the following error comes to console
JavaScript
1
2
1
(index):581 Uncaught TypeError: Cannot read property 'event' of undefined
2
Any clue about this problem?
Advertisement
Answer
1.Change your script to
JavaScript
1
16
16
1
<script>
2
3
var input = document.getElementById('myAddressBar');
4
var autocomplete = new google.maps.places.Autocomplete(input);
5
6
google.maps.event.addListener(autocomplete, 'place_changed', function () {
7
8
var place = autocomplete.getPlace();
9
var lat = place.geometry.location.lat();
10
var long = place.geometry.location.lng();
11
alert(lat + ", " + long);
12
13
});
14
15
</script>
16
change the inclusion line to your h
I hope it will help you for more details check out this link