Google Maps on a ruby on rails site - ruby-on-rails

Question

I'm using Google Maps on a ruby on rails site. Code is below:
<div id="map" style='width: 1170px; height: 500px;'></div>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'));
var json = <%=raw #places.to_json %>;
var data;
var service = new google.maps.places.PlacesService(map);
var bounds = new google.maps.LatLngBounds();
if (json.length == 0) {
map.setCenter({lat: 40.736, lng: -73.991});
map.setZoom(11);
}
else {
for (var i = 0, length = json.length; i < length; i++) {
data = json[i].google_key;
if(data != null) {
service.getDetails({placeId: data},function(results, status){
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
place: {
placeId: results.place_id,
location: results.geometry.location
},
});
bounds.extend(results.geometry.location);
map.fitBounds(bounds);
}
});
}
}
}
googleAutocomplete();
}
function googleAutocomplete() {
var input = document.getElementById('place_name');
var autoComplete = new google.maps.places.Autocomplete(input);
autoComplete.addListener('place_changed', function() {
var place = autoComplete.getPlace();
document.getElementById('place_name').value = place.name;
document.getElementById('place_google_key').value = place.place_id;
});
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA68X13MKpg02y8ZdpKtOUociJqhAg8QyY&libraries=places&callback=initialize" async defer></script>
I get the following error:
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
I would appreciate any help.

Answer 1

I think your issue is related to turbo-links. Try adding this line to your script tag and see if the error goes away.
data-turbolinks-eval="false"
So your new script tag should look like this:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA68X13MKpg02y8ZdpKtOUociJqhAg8QyY&libraries=places&callback=initialize" data-turbolinks-eval="false" async defer></script>
Let me know if that helps.