「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取得はこちらを参照。

とりあえず、地図を表示させてみる。

公式サイトを参照つつ……

まずはアプリケーションビューで、

app/views/layouts/application.html.erb

    <%= 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を作ってそこでやりました)に

app/views/users/test.html.erb


<!-- ↓①↓ -->
<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」となります。

app/javascript/controllers/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をそのまま上げるのは問題がありそうだったため、画像をモザイク付きのものに変更しました)。

とりあえずは今回はここまで。続きは**こちら**です。