set pin map.

app/assets/javascripts/maps.js

@@ -0,0 +1,39 @@
+function makeGmap(id, prop) {
+  return new google.maps.Map(document.getElementById(id), prop);
+}
+
+function makeGmapMarker(map, option) {
+  new google.maps.Marker(option).setMap(map);
+}
+
+function makeGmapLatlng(lat, lng) {
+  return new google.maps.LatLng(lat, lng);
+}
+
+function renderWholeMap() {
+  const prop = {
+    center: makeGmapLatlng(35.729503, 139.710900),
+    zoom: 2,
+  };
+  const map = makeGmap('gmap-container', prop);
+  makeGmapMarker(map, { position: prop.center });
+
+  const pins = document.getElementById('pins-data-list').children
+  for (let i = 0; i < pins.length; i++) {
+    const pin = pins[i];
+    makeGmapMarker(map, { position: makeGmapLatlng(pin.attributes['data-lat'].value, pin.attributes['data-lng'].value) });
+  }
+}
+
+function renderPin() {
+  const pins = document.getElementById('pins-data-list').children
+  for (let i = 0; i < pins.length; i++) {
+    const pin = pins[i];
+    const prop = {
+      center: makeGmapLatlng(pin.attributes['data-lat'].value, pin.attributes['data-lng'].value),
+      zoom: 12,
+    };
+    const map = makeGmap('gmap-container', prop);
+    makeGmapMarker(map, { position:  prop.center});
+  }
+}

app/controllers/me/maps/pins_controller.rb

@@ -17,15 +17,15 @@ def create
         @pin = @map.pins.build(pin_params)
 
         if @pin.save
-          redirect_to me_map_path(id: @map), notice: 'Pin was successfully created.'
+          redirect_to edit_me_map_pin_path(id: @pin), notice: 'Pin was successfully created.'
         else
           render :new
         end
       end
 
       def update
         if @pin.update(pin_params)
-          redirect_to me_map_path(id: @map), notice: 'Pin was successfully updated.'
+          redirect_to edit_me_map_pin_path(id: @pin), notice: 'Pin was successfully updated.'
         else
           render :edit
         end

app/decorators/pin_decorator.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module PinDecorator # :nodoc:
+  def as_html_data
+    content_tag(:div,
+                '',
+                'class' => 'pin-data-item',
+                'data-name' => name,
+                'data-lat'  => lat,
+                'data-lng' => lng)
+  end
+end

app/views/maps/_gmap_container.html.slim

@@ -0,0 +1,5 @@
+#gmap-container[style='width: 100%; height: 520px;']
+#pins-data-list
+  - map.pins.each do |pin|
+    = pin.as_html_data
+= googlemap_include_tag callback: 'renderWholeMap'

app/views/maps/show.html.slim

@@ -11,3 +11,5 @@ p
   ul
     - @map.pins.each do |pin|
       li = pin.name
+
+= render partial: 'gmap_container', locals: { map: @map }

app/views/me/maps/pins/_form.html.slim

@@ -22,3 +22,5 @@
     = f.label :lng
     = f.text_field :lng
   .actions = f.submit
+
+= render partial: 'gmap_container', locals: { pin: @pin }

app/views/me/maps/pins/_gmap_container.html.slim

@@ -0,0 +1,5 @@
+#gmap-container[style='width: 100%; height: 520px;']
+#pins-data-list
+  = pin.as_html_data
+
+= googlemap_include_tag callback: 'renderPin'

app/views/me/maps/pins/edit.html.slim

@@ -2,6 +2,4 @@ h1 Editing pin
 
 == render 'form'
 
-=> link_to 'Show', me_map_pin_path(id: @pin)
-'|
 =< link_to 'Back', me_map_path(id: @pin.map)

app/views/me/maps/show.html.slim

@@ -38,3 +38,5 @@ br
 => link_to 'Edit', edit_me_map_path(@map)
 '|
 =< link_to 'Back', me_maps_path
+
+= render partial: 'maps/gmap_container', locals: { map: @map }