map_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    if (typeof window.google !== "undefined") {
      this.initMap()
    }
  }

  initMap() {
    this.map = new window.google.maps.Map(this.element)

    this.map.fitBounds(this.details().geometry.viewport)
    this.map.setCenter(this.details().geometry.location)

    this.marker = new window.google.maps.Marker({ map: this.map })
    this.marker.setPosition(this.details().geometry.location)
    this.marker.setVisible(true)
  }

  placeChanged() {
    const place = this.autocomplete.getPlace()

    if (!place.geometry) {
      return
    }

    this.detailsTarget.value = JSON.stringify(place)

    this.updateMarker()
  }

  details() {
    return JSON.parse(this.data.get("details"))
  }
}