JS: yahoo mapを利用してみよう。単純に表示するのみ

2018年7月3日2018年10月15日JS, YahooMap

みなさん、こんにちは。Javascriptの重要さを最近知ると言うめっちゃ時代遅れな男、PQTomです。
JS、みなさん好きですか？
まー人それぞれだとは思うんですけど、好き嫌いに関係なくブログやwebアプリを作っている人は必ずと言っていいほど使用していると思います。
今日は別にJSの話をしようとは思っていないんですけどね〜〜〜
ブログを書いていく上で文字だけのブログってあんまり面白くなくないですか？（すいません）
ちなみにこのブログは基本文字だらけなんですけどね。
観光系のブログを書いてる人とかいろいろ写真載っけていて華やかでいいですよね。僕もなりたいです。
そういう人の中には自分がこれまでどんなところに行ってきたとかマップで見れればさらに良いと思いません？僕は思います。
今日はとりあえずマップの表示をしたいと思います。

Mapの種類

webでマップを使用するってなると

・Yahoo Map
・Google Map

この二つがメジャーだと思います。みなさんもよく見ますよね。
どっちの方が良いのか。。。わかりません。
実際どっちを使っても大差はないし、使い方もほぼ一緒なんで好きな方を使ってください。
ちなみに今回はYahoo Mapを使用していきたいと思います。
理由はただ単に僕が使用し始めたのがYahoo Mapだったからです。

Yahooマップ表示の下準備

自分のwebアプリやブログにマップを表示したいって思ったら、まずYahooAPIキーを取得しないといけません。
普通に使っていく分には無料なので気にしなくて大丈夫です。
とりあえずYahooのページでアカウントを作成します。
Yahoo! JAPAN デベロッパーネットワークでいろいろ設定して、APIキーを取得してください。
サイト行って指示通りやれば簡単にできると思うので頑張ってください笑

マップの表示

キーを取得したら表示していきます。

・Yahoo! JavaScriptマップAPI
・Yahoo!スタティックマップAPI

登録時にわかったと思いますが、マップには上記の二つがあります。
完結にいうとweb内で操作できるかそうでないかの違いです。
ユーザーに操作してもらうって思ったらJSマップを使用して、別にユーザーに操作してもらうことなんてないわって人はスタティックマップでいいでしょう。

JSマップ

マップ表示自体はすごく簡単です。
まず取得したAPIキーを利用してマップ情報を取得します。

<script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=【アプリケーションID】"></script>

これでyahoo mapが使用できる状態になったので。。。使用していきます。
サイトが起動したときにまずマップを書くコードを動かしたいので

window.onload = function(){}

この中にマップを書けっていう命令を書いていきます。
まずはマップを定義します

var ymap = new Y.Map("map");

で、ymapの中にyahooマップが入りましたね。
じゃあ書き出しの命令

ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);

を書いてマップを表示しろっていうJSの方は完成です。
new Y.LatLng(35.66572, 139.73100)はマップの中心の位置を設定、17はズームの度合いを設定したものです。
そしたらこのJS情報を表示するため、HTMLのBODY内に司令を書いていきます。

<div id="map" style="width:400px; height:300px"></div>

JSの時点でidを定義してあるのでそれをdivさせ、マップの大きさはcss styleで縦300px、横400pxとしています。

最後に全体のコードを載せておきます。

<html>
<head>
<script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=【アプリケーションID】"></script>
<script>
window.onload = function() {
    //mapの設定
    var ymap = new Y.Map("map");
    ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);
}
</script>
</head>
<body>
<div id="map" style="width:400px; height:300px"></div>
</body>
</html>

まとめ

どうでしたか？
実際これは公式サイトにも書いてあることなので必要ないっていえばないことなんですよね。。。
まーこれから込み入った動きについて書いていけたらいいなと思います。
スタティックマップの方に関しては特に動かしてないのであんまわかりません。
ただ一行コードを乗っけるだけなんでなんの問題なく簡単に理解できると思います笑笑
一度この機会に触って遊んでみたらどうでしょう。意外いろいろできるので使い方によっては面白いですよ。
では今日はこのへんで。

ではでは。

techJS, YahooMap

Posted by Dainari