LogoMark.png

GoogleMapsAPI の変更点

#author("2020-02-02T17:36:23+09:00;2020-02-02T17:35:58+09:00","default:inoue.ko","inoue.ko")
#author("2026-07-28T15:46:53+09:00;2026-07-28T13:59:04+09:00","default:inoue.ko","inoue.ko")
*JavaScript ｜ Google Maps API
~
ここでは、HTML + CSS + JavaScriptによる
Google Map の活用サンプルを紹介します。
~

&color(red){2016年6月22日より、GoogleマップのAPIの利用にはAPIキーの取得が必須になりました。またアクセス件数にも制限があります。以下のサイトからAPIキーを取得して、ソースに記載することが必要です（Googleアカウントが必要です）。};
https://developers.google.com/maps/web/
&color(red){キーはHTMLのソースコードから見えてしまいます。これを他に利用されないようにするためには、以下のGoogle API コンソールで、当該プロジェクトのキーの認証情報を確認し、このキーを使用できるウェブサイト、IP アドレス、またはアプリを指定して、キーを制限する必要があります。};
https://console.developers.google.com/apis/
~

&color(red){最近のブラウザでは、個人情報保護の観点から「http 接続では位置情報の取得を認めない」というかたちに仕様が変更されています。iMac OSX のSafariでは、システム環境設定で位置情報サービスをオンにする必要があるなど、動作確認には様々な条件をクリアする必要があります。};
~


***事例　地図上に現在位置を表示
//[[→DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_GPS/]]
//[[→DEMO>https://design.cs.kyusan-u.ac.jp/SampleSite/JS_GPS/]]
GeolocationAPIを使って、現在位置を取得。GoogleMap上に表示します。

-&color(red){位置情報取得の許可を求めるメッセージが出ますので、「許可」を選択して下さい。};
&color(red){お使いの環境によっては、正常に動作しません。};

''index.html''
 <!DOCTYPE html>
 <html lang="ja">
     <head>
          <meta name="viewport" content="width=device-width">
          <meta charset="UTF-8">
          <script type="text/javascript" 
            src="http://maps.google.com/maps/api/js?key=[YOUR API KEY]"></script>
          <script type="text/javascript" src="sample.js"></script>
          <link rel="stylesheet" type="text/css"  href="style.css">
          <title>Sample Page</title>
     </head>
     <body>
          <div id="map_canvas">　</div>
          <div id="pos">lat, lng</div>
     </body>
 </html>

''style.css''
 #map_canvas {
     width: 480px;
     height: 640px;
 }
ソース内の''YOUR API KEY''の部分に、あなたが取得したAPIキーを書く必要があります。https://developers.google.com/maps/web/
~

''sample.js''
 var gmap,gmarker;
 
 window.onload = function(){
     var defPos = new google.maps.LatLng(35, 135);
     gmap = new google.maps.Map(document.getElementById("map_canvas"), {
          zoom : 17,
          center : defPos,
          mapTypeId : google.maps.MapTypeId.ROADMAP
          });
     gmarker = new google.maps.Marker({
          positon : defPos,
          map: gmap,
          icon : "arrow.png"
    });
 
     navigator.geolocation.watchPosition(update);
 }
 
 function update(position){
     var lat = position.coords.latitude;
     var lng = position.coords.longitude;
     var currentPos = new google.maps.LatLng(lat, lng);
     gmap.setCenter(currentPos);
     gmarker.setPosition(currentPos);
     document.getElementById("pos").innerHTML = lat+","+lng+"<br>"+(new Date());
 }

-補足
--coordinates：座標
--latitude：緯度
--longitude：経度

~

***GoogleMap 公式情報
-以下のページに Google Maps JavaScript API の活用サンプルがあります。
https://developers.google.com/maps/documentation/javascript/

-以下にシンプルで埋め込み可能、コードは最小限の活用サンプルがあります。
https://developers.google.com/maps/documentation/static-maps/
~
~



~