はじめに
先日、Maps JavaScript APIを体験してみたのですが（一番下の参考に記載）、様々な機能があるため、もう少しこのAPIを利用してみたいと思います。
今回は、前回の内容の続きとして、mapを我が開志専門職大学に合わせ、map上のアイコンも変えたいと思います。
Maps JavaScript APIを利用して、大学の表示とアイコンの変更をしてみた
今回も前回同様、公式ドキュメントを参考に進めていきます。
参考：Maps JavaScript APIのドキュメントページ
1.大学の表示
前回作成したコードのうち、positionの内容のところが、緯度・経度を表すようなので、そこを大学のものに合わせていきます
- Google Mapで、開志専門職大学を検索して、その上で右クリックをすると、一番上に緯度・経度を表す数値が出てきます
- 上記の値を前回作成したコードのpositionのそれぞれに入力していきます
const position = { lat: 37.90825, lng: 139.06184 };
- 下記画面のzoomの数値を変更することで、mapの拡大縮小ができるので、ちょうど良い大きさに変更します
map = new Map(document.getElementById("map"), {
zoom: 16,
center: position,
mapId: "DEMO_MAP_ID",
});
- 実行結果
問題なく反映されました！
2.アイコンの変更
-
アイコンを変更するために、コードを追加します
ドキュメントの左側のメニューの画像を使ったマーカーを作成するをクリックし、カスタム画像ファイルを使用するのところのJavaScriptタブ内のコードを利用します
下記画面のオレンジの枠で囲んだところが、新規に追加する必要があるコードです
-
作成した変更後のコード
※1YOUR_API_KEYには、ご自身のAPIキーを入れてください
※2 CSSファイルは、前回の記事を参考にしてください
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="map"></div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
// Initialize and add the map
let map;
async function initMap() {
// The location
const position = { lat: 37.90825, lng: 139.06184 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement("img");
beachFlagImg.src =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
// The map, centered
map = new Map(document.getElementById("map"), {
zoom: 16,
center: position,
mapId: "DEMO_MAP_ID",
});
// The marker, positioned
const marker = new AdvancedMarkerElement({
map: map,
position: position,
content: beachFlagImg,
title: "Flag",
});
}
initMap();
</script>
</body>
</html>
- 実行結果
無事表示されました！
3.おまけ
先ほどのbeachFlagImg.src = "~~~"の~~~のURLを変えれば、任意のアイコンにできます。せっかくなので、大学のロゴを利用してみました。
画像が大きすぎて、かなりの面積を見えなくしてしまいました・・・
任意のアイコンにするときは、画像の大きさにも気をつけましょう。
まとめ
前回と今回で、Maps JavaScript APIの始め方、拡張の仕方に慣れてきた気がします。今回のような拡張機能を扱えるようになると、単にGoogle Mapの共有のiframeを利用したものよりも、リッチで高度なものを作成できそうです。
まだまだ様々な機能があり、最近だと3D地図の機能なども追加されているようなので、ちょっとでもこだわりを見せたい人は、ぜひこのAPIを活用してみてください。