Display Google Maps API with Rails and pin display

Introduction

I used the Google Maps API in my portfolio in the past, but I've forgotten the flow, so I'm reminded.

environment

rails 5.2.3 ruby 2.6.3

What to do this time

-Obtain the longitude and latitude from the current location information and display the marker. -Change the acquired list information to json format and place it on the map as a marker. ・ Map display

Create a controller to display, this time the action name is search.

spaces_controller.rb

  def search
    @spaces = Space.all
  end

Create a model, enter the address, and then get the latitude and longitude automatically.

space.rb

class Space < ApplicationRecord
  geocoded_by :address
  after_validation :geocode, if: :address_changed?
end

schema.rb

create_table "spaces", force: :cascade do |t|
    t.string "address"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.float "latitude"
    t.float "longitude"
end

Script to display MAP

javascript

  function initMap() 
    //Where to display the map
    var target = document.getElementById('gmap');
    //Map display
    var map = new google.maps.Map(document.getElementById('gmap'), {
      center: {lat: 35.681167, lng: 139.767052},//Center point setting
      zoom: 8//Map magnification setting
    });

    //Creating a location marker
    //If you cannot get your current location
    if(!navigator.geolocation){
      infoWindow.setPosition(map.getCenter());
      infoWindow.setContent('It does not support Geolocation.');
      infoWindow.open(map);
    }

    navigator.geolocation.getCurrentPosition(function(position) {
      //Get longitude and latitude of your current location
      var pos = { lat: position.coords.latitude, lng: position.coords.longitude };
      var mark = new google.maps.Marker({
        //Dropdown animation settings
        animation: google.maps.Animation.DROP,
        position: pos,
        map: map,
        //Create an icon for the current location pin. This time the default design is used for multiple markers, so change it.
        icon: {
          fillColor: "rgb(48, 255, 176)",
          fillOpacity: 1.0,
          path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
          scale: 4,
          strokeColor: "green",
          strokeWeight: 1.0
        }
      });
    }, function() {
      infoWindow.setPosition(map.getCenter());
      infoWindow.setContent('Error:Geolocation is invalid.');
      infoWindow.open(map);
    });
    //Multiple markers
    //List data in json format
    var spaces = #{raw @spaces.to_json};
    var marker = [];
    var info;
    for(var i = 0; i < spaces.length; ++i) {
      //Create markers by extracting longitude and latitude information one by one from the list
      spot = new google.maps.LatLng({lat: spaces[i].latitude, lng: spaces[i].longitude});
      marker[i] = new google.maps.Marker({
        position: spot,
        map: map,
      	animation: google.maps.Animation.DROP
      });
      markerEvent(i);
    }
    //Multiple marker hover event
    function markerEvent(i) {
      marker[i].addListener('mouseover', function() {
        var target = $('#' + (i + 1));
        $(".highlight").removeClass("highlight");
        target.addClass("highlight");
        var position = target.offset().top - 280;
        $('body,html').animate({scrollTop:position}, 400, 'swing');
      });
    }
    //-------------------------------------------------------------
  }


script src="https://maps.googleapis.com/maps/api/js?key=#{ENV[""]}&callback=initMap" async defer

Note that this time the template engine is slim and it is written directly in it, so the data variable storage is different from usual. Using gem's geocoder makes it very easy to get the longitude and latitude from the name, but this time I'm using Google Geocoding because it's inaccurate and doesn't even display the street number.