こんにちは．
前回まではwxPythonについての記事を連続5回を書きました．
しかし，今回はちょっとテーマを変えてGoogleMapsAPIについて話したいと思います．
なぜ突然を変えたと考えている人がいるかも知れません．理由は私自身の次の研究テーマに使うので色々調べてみました．今回はこれの簡単な紹介となります．
まず，GoogleMapsAPIを利用するためにAPIキーが必要となります．
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
↑こちらのページで簡単にキーを取得することができます．
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex,nofollow,noarchive" />
<title>GoogleMapsAPI Sample</title>
<script src="http://maps.googleapis.com/maps/api/js?key=APIキー" type="text/javascript"></script>
<script src="sample.js" type="text/javascript"></script>
<script src="jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 700px; height: 700px"></div>
<form>
<p><input type="button" id="btn" value="マーカー作成" onclick="loadJson()" /></p>
</form>
</body>
</html>
こちらは表示するためのhtmlとなっています．
6行目の「APIキー」の部分は貴方自身で取得したAPIキーを入れてください．
7行目は下のsample.jsを呼び出しています．
8行目のjquery-3.3.1.jsについては https://jquery.com/download/ の「jQuery」の「Download the compressed, production jQuery 3.3.1」からダウンロードしてください．
GoogleMapを表示するため，<div id="map_canvas" style="width: 700px; height: 700px"></div>を使います．Mapのサイズは700px*700pxとなります．
sample.jsについての説明はプログラム内でコメント形式て話したいと思います．
// マップ初期化
function initialize() {
// 表示する場所のidを取得
var target = document.getElementById("map_canvas")
// 経度：lat，緯度：lngを設定
var latlng = {lat: 35.383575, lng: 139.344170};
var options = {
zoom: 10, // ズーム1は一番小さい
center: latlng //Mapの中央:上の座標
};
// Mapを作成
map = new google.maps.Map(target, options);
// マーカーを表示
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'where' // マーカーの名前
});
// Mapをクリックする時の動作
map.addListener("click",function(e){
// コンソールで経度を表示
console.log("lat: " + e.latLng.lat());
// コンソールで緯度を表示
console.log("lng: " + e.latLng.lng());
// コンソールで{経度,緯度}を表示
console.log("(lat,lng): " + e.latLng.toString());
// this.setCenter(e.latLng); // クリックする場所をMapの中心にする(画面の移動速度が速い)
this.panTo(e.latLng); //クリックする場所をMapの中心にする(画面の移動速度がゆっくり)
// クリックする場所をマーカーを立てる
var click_marker = new google.maps.Marker({
position: e.latLng,
map: map,
title: e.latLng.toString(),
animation: google.maps.Animation.DROP // マーカーを立つときのアニメーション
});
// 上で立てたマーカーをもう一度クリックするとマーカーを削除
click_marker.addListener("click",function(){
this.setMap(null);
});
});
}
// 「マーカー作成」ボタンをクリックする時のマーカー表示
// JSONデータを使って座標と名称を記録
function loadJson(){
var json = [];
$(function(){
// JSONのファイルを読み込む
$.getJSON("data.json", function(data) {
json = data;
//JSONの要素数分マーカーを作成
console.log(json);
for (i = 0; i < json.length; i++) {
latlng = new google.maps.LatLng(json[i].lat, json[i].lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
});
}
});
});
}
Webページを立ち上げる時のMap状態は下の図となります．
マーカー作成ボタンをクリックした場合は多くのマーカーが作られます．
下の図となりますが，Mapの中心を移動しました．
今回の「GoogleMapsAPIを使ってみる」は以上で終わりましす．
また，次回の内容は未定ですが，特別なことがなければ「wxPythonを使ってみる(5)」の続きについて書くと思います．
読んでいただいてありがとうございます．