Google (2)


あなたのiPhoneの自動ロック時間が変えられない理由

わたしのiPhone(iPhone X)が自動ロックされるまでの時間が30秒以外に変えられない原因が長いことわからなかったのですが、ここ最近続けてきたGoogle断ちの一環でGSuiteをやめた時、ようやくわかりました。

GSuiteの端末管理のせいでした。

GSuiteを使うようなひとには自明だからなのか、これを原因として挙げている解説サイトは皆無…というわけで、ここに書いておきます。

それにしても、GSuiteをやめるのは骨折りだった…。




Google Map API: KML/KMZファイルを使ってマイマップを表示する

作ったのは以下のページ。ページが残っている間はソースコードを参考にしてください。
http://www.gowest-comewest.net/map/

下準備として、KMLもしくはKMZファイルのURLを取得します。いったんダウンロードしてURLがわかる状態にします。

マイマップのプレビューページの「︙」をクリックすると「KMLをダウンロード」という項目が出てきます。それをクリックすると2つの選択肢が出てきます。上の選択肢がKMZ、下がKMLです。KMZのほうがリッチな表示ができます。

その後、Chromeだったら、Ctrl+Jでダウンロード項目を表示して、各ファイルのURLを右クリックして「リンクをコピー」でOKです。これでKML/KMZファイルのURLが取得できます。

ここからコーディングです。
わたしは以下のようなJSONを作りました。付記したコメントごと貼りつけるので、読んで参考にしてください。

// キャッシュ回避のためのパラメータを作成する。一日おきに更新されるようになる。
let dateObj = new Date();
let param = "" + dateObj.getFullYear() + dateObj.getMonth() + dateObj.getDate();

// 新しいレイヤーを作ったらここに追記する
// KmlLayerというクラス名だけどKMZもOK。KMLじゃなしにKMZ使ったほうが表示がリッチ。
let layerSetting = {
All: {
name: "すべて表示する",
url: "https://www.google.com/maps/d/u/0/kml?mid=1_2yJu1dr6XKvzy2kn7mYTsUwMX0&nl=1&" + param,
controlId: "MapControlAll"
},
Osaka: {
name: "大阪のおすすめスポット",
url: "https://www.google.com/maps/d/u/0/kml?mid=1_2yJu1dr6XKvzy2kn7mYTsUwMX0&lid=1uWfMgRUbJE&nl=1&" + param,
controlId: "MapControlOsaka"
},
Kyoto: {
name: "京都のおすすめスポット",
url: "https://www.google.com/maps/d/u/0/kml?mid=1_2yJu1dr6XKvzy2kn7mYTsUwMX0&lid=PKzfdnvz1AM&nl=1&" + param,
controlId: "MapControlKyoto"
},
Hyogo: {
name: "兵庫のおすすめスポット",
url: "https://www.google.com/maps/d/u/0/kml?mid=1_2yJu1dr6XKvzy2kn7mYTsUwMX0&lid=0d8OkxEeeIw&nl=1&" + param,
controlId: "MapControlHyogo"
},
Moyori: {
name: "移住したひとの最寄り駅",
url: "https://www.google.com/maps/d/u/0/kml?mid=1_2yJu1dr6XKvzy2kn7mYTsUwMX0&lid=zM_vTKi76EM&nl=1&" + param,
controlId: "MapControlMoyori"
}
};

※URLの読み込みはGoogle側でキャッシュされるので、URLパラメータを一日ごとに更新して毎日一度は更新されるようにしています。

次は、表示する部分です。

// マップを初期化する
function initMap() {
let map = new google.maps.Map(document.getElementById("GoWestMap"), {
scrollwheel: false
});

let layers = new Array();
$.each(layerSetting, function(id, setting) {

// レイヤーを作成する
layers[id] = new google.maps.KmlLayer(setting.url);

// レイヤー切り替えボタンを設置する
let controlTag = `<a id="${setting.controlId}" href="#">${setting.name}</a>`;
$("#GoWestMapControl").append(controlTag);

$("#" + setting.controlId).on("click touchend", function(e) {
e.preventDefault();
displayLayer(map, layers, id);
$(this).siblings(".display").removeClass("display").end().addClass("display");
});
});

// 最初は全部表示する
displayLayer(map, layers, "All");
$("#" + layerSetting.All.controlId).addClass("display");
}

// すべてのレイヤーをクリアしてから指定されたレイヤーを表示する
function displayLayer (map, layers, id) {
$.each(layerSetting, function(layerId, setting) {
layers[layerId].setMap(null);
});
layers[id].setMap(map);
}

<div id="GoWestMap"></div>
というHTMLが書いてあることが前提です。そこに地図が描画されます。CSSで大きさの指定も忘れずに。

最後に、地図の描画を実行するJavaScriptを書きます。
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR API KEY>&callback=initMap" async defer></script>

※ YOUR API KEYのところは、ご自身でAPI KEYを取得して、書き込んでください。

読ませて理解させるレポートでごめんなさい。こんなことにトライする方にとってはそんなに難しくないはず・・・。
以上です。