質問編集履歴

1 コード追記

syntax

syntax score 7

2018/03/26 23:41  投稿

Google Maps JavaScript APIの表示速度が遅い
Google Maps JavaScript APIを使用したアプリケーションを開発しています。
数日前からpc(mac)で開くと現在地を取得して、マップを表示されるまでにかなり時間がかかります。
長いと5分くらい経過した後にマップが表示されます。
開発環境、本番環境両方とも同じ症状が出ます。
本番にあげているアプリケーションにスマホからアクセスすると、問題なくすぐ表示されます。
またwindowsのマシンからアクセスした場合もすぐに表示されます。
友人のmacからアクセスしてみると、自分のpcと同じようにかなり時間がかかったため、macでの環境が何か影響しているのかなと思うのですが、、
どなたか原因が分かる方いらっしゃいましたら、よろしくお願い致します。
macOS High Sierra ver 10.13.3
apiのアクセス数は制限を越えておりません。
google api のconsole特にエラーは出ておりません。
google api のconsole特にエラーは出ておりません。
▼view.html.erb
```
<script async defer
       src="//maps.googleapis.com/maps/api/js?key=apikey&libraries=geometry" type="text/javascript">
</script>
 <div id="map" >
   </div>
```
▼jsコード
```ここに言語を入力
 //home表示で現在地を取得
 var url=location.href;
 if (url=="https://www.fouru.site/home") {
   get_current_location()
 }
 function get_current_location(){
   if(navigator.geolocation){
     navigator.geolocation.getCurrentPosition(
       // success callback
       function(position) {
         var latitude = position.coords.latitude
         var longitude = position.coords.longitude
         $(".currentLocation").val("現在地再取得");
         $("#longitude").val(longitude);
         $("#latitude").val(latitude);
         var currentPos ={lat: latitude, lng: longitude };
         var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 15,
           center: currentPos
         });
         var transitLayer = new google.maps.TransitLayer();
         transitLayer.setMap(map);
         var marker = new google.maps.Marker({
           position:currentPos,
           map: map
         });
         display_radius(map,currentPos)
         marker.addListener('click', function() {
           infowindow.open(map, marker);
         });
       },
       // error callback
       function(error) {
         switch(error.code) {
           case 1: //PERMISSION_DENIED
             alert("位置情報の利用が許可されていません");
             break;
           case 2: //POSITION_UNAVAILABLE
             alert("現在位置が取得できませんでした");
             break;
           case 3: //TIMEOUT
             alert("タイムアウトになりました");
             break;
           default:
             alert("その他のエラー(エラーコード:"+error.code+")");
             break;
         }
       }
     )
   }else{
     message = 'ご使用中のブラウザは現在地検索に対応されておりません。'
     Alert.set('warning', message)
   };
 }
```
  • JavaScript

    37404 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13301 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Google API

    1450 questions

    Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

  • Google マップ

    680 questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

  • Ruby on Rails 5

    5967 questions

    Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る