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
<script> function initialize() { var input = document.getElementById('myAddressBar'); var autocomplete = new google.maps.places.Autocomplete(input); } google.maps.event.addDomListener(window, 'load', initialize); </script>
And i have included the Google Api with my key like this in my head Tag
<script src="js/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js? key=AIzaSyBROO3Md6_fZD5_fd1u8VTlRxd4VdJnAWU&libraries=places" async defer></script> <script> function initMap(){} </script>
But problem is that it is works when i login or logout. As i refresh the page the following error comes to console
(index):581 Uncaught TypeError: Cannot read property 'event' of undefined
Any clue about this problem?
Advertisement
Answer
1.Change your script to
<script> var input = document.getElementById('myAddressBar'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); var lat = place.geometry.location.lat(); var long = place.geometry.location.lng(); alert(lat + ", " + long); }); </script>
change the inclusion line to your h
I hope it will help you for more details check out this link