search
LoginSignup
2

More than 3 years have passed since last update.

posted at

Organization

Azure Maps を使ってみる

今回は Azure Maps を使ってみようと思います。これまで Google Maps API は何度かつかったことがありますが、Azure Maps API は初めてなので使用感含め確認してみたいと思います。

Azure Portal から Azure Maps リソースをデプロイする

まずは、Azure Maps を使用した地図を表示する WebApp をデプロイします。今回の Runtime Stack は php を使います。(なんでも大丈夫です)

次に、Azure Portal から Azure Maps をデプロイします。あとで一括で削除できるように WebApp と同じリソースグループに纏めておくと良いですね。デプロイが完了したら、Azure Maps に接続するための Key が発行されていますので、そちらをメモしておきます。

image.png

Azure Maps で地図を表示するためのコードを書く

先ほどデプロイした WebApp に Javascript で地図を表示する コードを書いていきます。
コードは以下の Microsoft が GitHub に公開しているサンプルがあります。
https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Tutorials/interactiveSearch.html

この中の以下の部分を書き換えます。先ほどメモした Key を入力します。

authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }

書き換え完了したら WebApp にブラウザからアクセスしてみます。
image.png

サンプルコードを張り付けるだけで、位置情報の名前から地図の位置を検索することができます。このサンプルはロサンゼルスが中心になっているので、この中心を大井町駅にしてみましょう。地図の中心座標は以下で指定しています。

map = new atlas.Map('myMap', {
                center: [-118.270293, 34.039737],
                zoom: 14,
                view: 'Auto',
                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

ここの Center を大井町駅の座標 [139.734978, 35.607452] に書き換えます。
ここで少し注意が必要ですが、順番は、経度、緯度の順番になっています。 Google Maps API は逆なので、Google Maps API になじみのある人はちょっと抵抗があるかもしれません。(実際僕がそうでした。。)

image.png

な、なんだこれ!?
なんと Azure Maps には日本の地図情報はまだ大きな道路だけのようです。(まじで使えない、、、)はやく色々な地域に対応してもらって、IoT アプリとかいろいろなサービスと掛け合わせて使いたいです。

参考情報

Azure Maps とは
https://docs.microsoft.com/ja-jp/azure/azure-maps/about-azure-maps

Azure Maps Blog
https://azure.microsoft.com/en-us/blog/topics/azure-maps/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2