Карты Google на сайте ruby ​​on rails

Question

Я использую Google Maps на рубине на сайте rails. Код ниже:

<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>

Я получаю следующую ошибку:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Буду признателен за любую помощь.

Answer 1

Я думаю, что ваша проблема связана с турбо-ссылками. Попробуйте добавить эту строку в тег сценария и посмотрите, исчезнет ли ошибка.

data-turbolinks-eval="false"

Итак, ваш новый скрипт-тег должен выглядеть так:

<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>

Дайте мне знать, если это поможет.