「railsアプリで、stimulusを使ってyahoo地図を操作する方法」についての纏めーー
当初はgooglemapで試してみるつもりだったが、料金請求が怖そうなのでyahoo地図に切り替えた（操作自体は似ているので、ちょっと書き換えればgooglemapにも簡単に切り替えられるはず。実際、【googlemap操作について書かれたサイト】も複数参照して書いています）。
やったこと、やる予定のこと
0. railsアプリへのstimulus適用（以前書いた記事）
1. stimuluｓでyahoo地図を表示（←今ここ）
２. 表示した地図上で、指定座標に移動
……この段階では「指定座標」はコードに直接書いています。
座標取得の方法は「3」以降でやる予定。
3. 住所から座標を取得し、それをDBに登録
4.「3」で登録した情報を選択し、yahoo地図上でその場所に移動（最終回）
【事前準備】railsにstimulusを適用し、yahooのアプリケーションIDも取得しておく
stimulus適用はこちら（自記事）やこちら、アプリケーションID取得はこちらを参照。
とりあえず、地図を表示させてみる。
公式サイトを参照つつ……
まずはアプリケーションビューで、
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application' %>
<%# ↓これを追記↓ %>
<script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=【取得した自分のID】"></script>
<%# ↑これを追記↑ %>
と【yahooのAPIを使用する】旨を記述
……APIを使用するビューだけに個別に書いても問題ない（というか、アクセス回数制限を考え得るならそちらのほうがいい）のだろうけど、今回は面倒なので全部に適用させることにした。
で、地図を表示したい場所(ビュー、今回はusers/testを作ってそこでやりました)に
<!-- ↓①↓ -->
<div data-controller="moving">
<p>Google Maps APIを使ったサンプルです。</p>
<!-- ↓②↓ -->
<div id="idmeihatekitoudemoiiyo" style="width:500px; height:300px" data-target="moving.map" ></div>
</div>
と記述。
①stimulus用に【div要素の枠、「data-controller="moving"」】を作成。
②「①」の枠の中に配置した【ヤフー地図を表示するためのdiv要素……「div id="map"」】に【「map」というターゲット名……「data-target="moving.map"」】を設定する。
（stimulusだと要素はデータターゲット名で指定可能なので、「②」のdiv要素のid名は適当でも問題なくなります（いやでも、これは適当すぎだろう）。
最後に、対応するstimulusファイルを作成。
↑で「data-controller="moving"」としているので、ファイル名は「moving_controller.js」となります。
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "map" ]
initialize() {//←①
this.map = new Y.Map(this.mapTarget.id);//←②
this.map.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);//←③
//↓④
var center = new Y.CenterMarkControl
var control = new Y.LayerSetControl();
this.map.addControl(center);
this.map.addControl(control);
}
}
①イニシャライズ時に、
②【ビュー側で「data-target="moving.map"」としている要素】のidを使って、「this.map」を設定
……ここはid名を直接記入しても、問題はないです。ただ要素の指定はターゲット名で統一したほうが、なんかカッコイイ気がする（いや、id名が異なる違う要素にも使い回せますし）。
③「this.map」にヤフー地図を書き込む（「drawMap」。「35.66572, 139.73100」が初期表示する座標、お好みで変更してください。
④お好みでレイヤーを設定（ 公式サイトにある「レイヤーセットID」をご参照ください）。
これで、地図が画面に表示されるように……
なりました(【20190624、変更】yahooMapをそのまま上げるのは問題がありそうだったため、画像をモザイク付きのものに変更しました)。
とりあえずは今回はここまで。続きはこちらです。