2

アプリケーションの作成を開始して以来、コンソール、Chrome には常にメッセージがありました。

Uncaught TypeError: Cannot read property 'Fa' of undefined

しかし、アプリが正常に読み込まれ、Chrome と Firefox ですべてが画面に表示されたので、無視しました。Chromeで詳細をデバッグすると、次のことがわかるため、Googleマップに関連していることはわかっています。

Uncaught TypeError: Cannot read property 'Fa' of undefined
b.b
ag.(anonymous function).Y                           %7Bmain,places%7D.js:26
tJ.(anonymous function).Yc
(anonymous function)
(anonymous function)                                %7Bmain,places%7D.js:10
uJ
a.b
ag.(anonymous function).Y                           %7Bmain,places%7D.js:26
(anonymous function)

%7Bmain のリンクは、Google のものであるhttps://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/6/%7Bmain,places%7D.jsに移動します。

しかし、昨日、IE でアプリを試してみましたが、同じエラーで壊れました。マップが読み込まれませんでした。何が間違っている可能性があり、どうすれば修正できますか?

これが私の機能です：

function initialize_google_maps() {

    var user_longitude = $("#user-position").attr("data-lng");
    var user_latitude = $("#user-position").attr("data-lat");

    var currentlatlng =
        new google.maps.LatLng(user_latitude, user_longitude);

    var zoom = 10;
    var myOptions = {
      zoom: zoom,
      center: currentlatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        minZoom: 1, 
        // don't want people to be able to hone in
        // on others' addresses too specifically.
        maxZoom: 13
      };


      var map = new google.maps.Map(
          document.getElementById("map_canvas"),
          myOptions
      );

      var marker = new google.maps.Marker({
          map: map,
          position: currentlatlng,
          icon: { opacity: 0 }
      });

      var circle = new google.maps.Circle({
        map: map,
        fillOpacity: 0,
        strokeWeight: 2,
        strokeOpacity: 0.7,
        radius: 10000,
      });
      circle.bindTo('center', marker, 'position');
    }

私はそれを次のように呼びます：

<!-- draw the map, on the right of the screen -->
    <div id="map_canvas">

      <script>
      $(function() {

// this function can be found in draw_map.js
      initialize_google_maps();

                   });
      </script>

    </div>

ここで、ページがレンダリングされる前にjavascriptがロードされていることを確認するという同様のスタックオーバーフローの質問を見たので、次のように関数を呼び出してみました:

      <script>
$(document).on("ready", function(){

// this function can be found in draw_map.js
      initialize_google_maps();


  });

それでも同じエラーが発生します。

私が呼び出しているGoogleマップライブラリは次のとおりです。

 <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
4

1 に答える 1