#author("2020-02-02T17:36:23+09:00;2020-02-02T17:35:58+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/]]
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/
~
~
~