地図表示テスト1

簡単な使い方

1. jquery.rejobMaps.js が読み込まれるようにしておきます。
2. Google Maps Javascript APIs（https://maps.googleapis.com/maps/api/js）を読み込みます。（公開する場合、keyの設定が必要です）
3. マップを表示させたい div タグなどに data-rejob-map 属性を付与します。
4. マップを表示させたいタグの内部には、data-lat、data-lng 属性に緯度・経度情報を持ったマーカー用タグを書くと、マーカーを表示できます。
5. マーカー用のタグの内部にHTMLを書くと、その内容が情報ウィンドウ（マーカーをクリックした際に開く）に表示されるようになります。。

コード

<div class="map_canvas" data-rejob-map>
  <div data-lat="35.6911787227242" data-lng="139.70417618751526">
    <h2>新宿三丁目駅</h2>
  </div>
</div>

<!-- TODO: ローカル以外ではキーの指定が必須！ -->
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=FALSE"></script>
<script src="jquery.rejobMaps.js"></script>

実行結果

地図表示テスト2

コード

<div class="map_canvas" data-rejob-map>
  <div data-lat="35.70209141821235" data-lng="139.69561994075775">
    <h2>リジョブ</h2>
    <p>
      東京都新宿区百人町2-27-7<br>
      HUNDRED CIRCUS East Tower 2F
    </p>
  </div>
  <div data-lat="35.6967241306615" data-lng="139.70829874277115">
    <h2>じげん</h2>
    <p>
      東京都新宿区新宿6-27-30<br>
      イーストサイドスクエア
    </p>
  </div>
</div>

<!-- TODO: ローカル以外ではキーの指定が必須！ -->
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=FALSE"></script>
<script src="jquery.rejobMaps.js"></script>

実行結果

地図位置取得テスト１

コード

<form id="search-form">
  <fieldset>
    <input id="address" type="text">
    <button type="submit">検索</button>
  </fieldset>
</form>

<dl>
  <dt>緯度</dt>
  <dt id="lat"></dt>

  <dt>経度</dt>
  <dt id="lng"></dt>
</dl>

<div><small>※地図をダブルクリックでマーカー設置、マーカーD&Dでマーカー移動できます。</small></div>
<div id="get-position-map" class="map_canvas" data-rejob-map></div>

<!-- TODO: ローカル以外ではキーの指定が必須！ -->
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=FALSE"></script>
<script src="jquery.rejobMaps.js"></script>

実行結果

地図位置取得テスト２

コード

<form id="search-form2">
  <fieldset>
    <input id="address2" type="text">
    <button type="submit">検索</button>
  </fieldset>
</form>

<dl>
  <dt>緯度</dt>
  <dt id="lat2"></dt>

  <dt>経度</dt>
  <dt id="lng2"></dt>
</dl>

<div><small>※地図をダブルクリックでマーカー設置、マーカーD&Dでマーカー移動できます。</small></div>
<div id="get-position-map2" class="map_canvas" data-rejob-map>
  <div data-lat="35.6911787227242" data-lng="139.70417618751526" data-rejob-map-marker-draggable></div>
</div>

<!-- TODO: ローカル以外ではキーの指定が必須！ -->
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=FALSE"></script>
<script src="jquery.rejobMaps.js"></script>

実行結果