<div id='map'>
<script>
let map

function initMap(){
  geocoder = new google.maps.Geocoder()

  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: <%= @performance.latitude %>, lng: <%= @performance.longitude %>},
    zoom: 15,
       zoomControl: false,
       mapTypeControl: false,
       fullscreenControl: false,
  });

  marker = new google.maps.Marker({
    position:  {lat: <%= @performance.latitude %>, lng: <%= @performance.longitude %>},
    map: map
  });
}
</script>
　<script src="https://maps.googleapis.com/maps/api/js?key=<% ENV['GOOGLE_MAP_API'] %>&callback=initMap" async defer>
</script>
</div>

GOOGLE_MAP_API='--------------------------(APIKey)'

Geocoder.configure(
  # Geocoding options
  timeout: 5,                 # geocoding service timeout (secs)
  lookup: :google,         # name of geocoding service (symbol)
  # ip_lookup: :ipinfo_io,      # name of IP address geocoding service (symbol)
  # language: :en,              # ISO-639 language code
  # use_https: false,           # use HTTPS for lookup requests? (if supported)
  # http_proxy: nil,            # HTTP proxy server (user:pass@host:port)
  # https_proxy: nil,           # HTTPS proxy server (user:pass@host:port)
  api_key: ENV['GOOGLE_MAP_API'],               # API key for geocoding service
  # cache: nil,                 # cache object (must respond to #[], #[]=, and #del)
  # cache_prefix: 'geocoder:',  # prefix (string) to use for all cache keys

  # Exceptions that should not be rescued by default
  # (if you want to implement custom error handling);
  # supports SocketError and Timeout::Error
  # always_raise: [],
  units: :km,                 # :km for kilometers or :mi for miles
  # Calculation options

  # distances: :linear          # :spherical or :linear
)

vim ~/.zshrc
GOOGLE_MAP_API='--------------------------(APIKey)'