HTMLコード内に「Azure Mapsの共有認証キー」を埋め込んでいますが、このキーは外部公開できないことに注意が必要です。
HTMLのページ上に Azure Mapsの地図を表示するコードを紹介します。
Azure MapsのAPIを利用して地図をHTMLのページに表示する手順を紹介します。
はじめにAzure Mapsのアカウントを作成してAPIを呼び出すためのキーを取得する必要があります。
手順の詳細はこちらの記事を参照してください。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script>
var map;
function GetMap() {
map = new atlas.Map("myMap", {
center: [139.76, 35.68],
zoom: 10,
language: 'ja',
fallbackLanguage: 'en',
style: 'road',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '(Azure Mapsの共有認証キー)'
},
});
}
window.onload = GetMap;
</script>
</head>
<body>
<h1>Azure Map のデモ</h1>
<div id="myMap" style="width: 100%; height: 680px;"></div>
</body>
</html>
地図を表示する枠を記述します。
<div id="myMap" style="width: 100%; height: 680px;"></div>
ページ表示時に実行される、onload イベントに GetMap関数を設定します。ページが表示される際に、GetMap関数が呼び出される動作になります。
window.onload = GetMap;
GetMap 関数では、atlas.Map オブジェクトを作成します。コンストラクタの第一引数にマップを表示する枠のidを与えます。今回は、id="myMap" のdiv枠を
記述していますので、myMap を与えます。第二引数には、Mapのオプションを与えます。オプションのプロパティの主要なものは以下があります。
| プロパティ名 | 意味 |
|---|---|
| autoResize | 自動リサイズの有無 |
| style | 地図の種類 (road, satellite, satellite_road_labels, grayscale_dark, grayscale_light, night, oad_shaded_relief など) |
| center | マップ ビューの中心一 |
| zoom | マップの拡大レベル |
function GetMap() {
map = new atlas.Map("myMap", {
center: [139.76, 35.68],
zoom: 10,
language: 'ja',
fallbackLanguage: 'en',
style: 'road',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '(Azure Mapsの共有認証キー)'
},
});
}
上記のHTMLファイルをWebブラウザで表示します。
下図のページが表示されます。ページ内に地図が表示できています。language: 'ja' を指定していますが、
β版のためか、英語での地名表示されている場所が多いです。
