RailsでGoogle Mapsを扱うときのライブラリを公開しました

1
//= require map_helper/map_helper

1
rails g scaffold place name:string address:stiring latitude:float longitude:float

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ready = ->

  if !window.google

    script = document.createElement('script')
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
                  'language=ja&callback=triggerMap'
    document.body.appendChild(script)

  else
    triggerMap()

window.triggerMap = ->
  # your code

# For turbolinks
$(document).ready(ready)
$(document).on 'page:load', ready

1
2
3
4
5
6
<div class="map-show-canvas" 
            data-latitude="<%= @place.latitude %>"
            data-longitude="<%= @place.longitude %>">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.triggerMap = ->

  # --- show --- #
  mapCanvas = $('.map-show-canvas')
  if mapCanvas.length && mapCanvas.attr('data-latitude')

    MapHelper.showMap(mapCanvas.get(0),
      {
        mapHeight:      300,
        mapLat:         mapCanvas.attr('data-latitude'),
        mapLng:         mapCanvas.attr('data-longitude'),
        zoom:           10
        #scaleControl: ,
        #scrollwheel: ,
        #showMarker: ,
        #draggable: ,
      }
    )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%= form_for(@place) do |f| %>
  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :address %><br>
    <%= f.text_field :address, class: "address" %>
    <%= link_to "SEARCH", "#", class: "map-search-button" %>
    <div class="map-canvas" style="height: 0;"
                data-lat="<%= f.object.latitude %>"
                data-lng="<%= f.object.longitude %>">
    </div>
    <%= f.text_field :latitude, readonly: true %>
    <%= f.text_field :longitude,readonly: true %>
  </div>
<% end %>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.triggerMap = ->

  # --- new/edit --- #
  if $('.map-search-button').length

    MapHelper.searchShowMap($('.map-canvas').get(0),
      {
        mapHeight:      300,
        trigger:        $('.map-search-button'),
        addressInput:   $('.address'), #could be multiple
        latInput:       $('#place_latitude'),
        lngInput:       $('#place_longitude'),
        zoom:           10
        #scaleControl: ,
        #scrollwheel: ,
        #showMarker: ,
        #draggable: ,
        afterShow: -> 
          console.log "Map is displayed."
      }
    )

1
2
3
4
5
6
7
8
9
def index
  @places = Place.all
  respond_to do |f|
    f.html
    f.json { render json: @places }
  end
end

1
2
3
<div class="map-index"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.triggerMap = ->

  # --- index --- #
  if $('.map-index').length
    $.ajax(
      type: 'GET',
      url: '/places.json',
      # data: { if you need }
    ).done( (data) ->
      if data.length
        MapHelper.showMapWithMarkers($('.map-index').get(0),
          {
            mapHeight:    400,
            mapLat:       data[0].latitude,  #center
            mapLng:       data[0].longitude, #center
            zoom:         2,
            showMarker:   false,
            draggable:    false,
            controller:   'places',
            titleField:   'name'
          }, data)
    )