const loader = new Loader({
      apiKey: //your_api_key,
      version: "weekly",
      libraries: ["places"],
    });
const { Map, OverlayView } = await loader.importLibrary("maps");    
function getAddress(place) {
  const { address_components, formatted_address, geometry, name } = place;
  let country = (address_components || []).find((component) => component.types.includes("country"));
  let state = (address_components || []).find((component) =>
    component.types.includes("administrative_area_level_1")
  );
  let city = (address_components || []).find((component) => component.types.includes("locality"));
  let address_line = (address_components || []).find((component) => component.types.includes("route"));
  let postal_code = (address_components || []).find((component) => component.types.includes("postal_code"));
  return {
    name: name,
    address: formatted_address,
    country: country?.long_name,
    city: city?.long_name,
    state: state?.long_name,
    postalCode: postal_code?.long_name,
    coords: {
      lat: geometry.location.lat(),
      lng: geometry.location.lng(),
    },
  };
}
class CustomOverlay extends OverlayView {
      div_;
      constructor(map) {
        super();
        this.div_ = null;
        this.setMap(map);
      }
      async onAdd() {
        var div = document.createElement("div");
        div.style.zIndex = "100";
        div.style.borderStyle = "solid";
        div.style.borderWidth = "1px";
        div.style.backgroundColor = "white";
        div.style.padding = "4px";
        div.style.position = "absolute";
        div.style.height = "40px";

        // Add a textbox inside the div
        var textbox = document.createElement("input");
        textbox.type = "text";
        textbox.style.width = "100%";
        textbox.style.height = "100%";
        textbox.placeholder = "Search Location";
        div.appendChild(textbox);
        this.div_ = div;
        this.getPanes().overlayMouseTarget.appendChild(div);
        // this.getPanes().floatPane.appendChild(div);

        // Prevent map from intercepting events when interacting with the textbox
        function handleMouseEvents(e) {
          if (e.target == textbox) {
            e.stopPropagation();
          }
        }
        const map = this.getMap();
        const mapDiv = map.getDiv();
        google.maps.event.addDomListener(mapDiv, "mousedown", handleMouseEvents, true);
        google.maps.event.addDomListener(mapDiv, "dblclick", handleMouseEvents, true);

        map.addListener("dragstart", function (e) {
          //
        });
        map.addListener("dragend", function (e) {});
        const { SearchBox } = await loader.importLibrary("places");

        const search = new SearchBox(textbox);
        search.addListener("places_changed", async function () {
          const place = search.getPlaces();
          console.log("use data for the place", place);
          // or use the function above "getAddress" to return a json formatted data
        });
      }
      draw() {
        var overlayProjection = this.getProjection();
        if (!overlayProjection) {
          return;
        }

        // Get northeast and southwest corners of the map's current bounds
        const mapBounds = this.getMap().getBounds();
        const fromLatLngToDivPixel = function (latLng) {
          return overlayProjection.fromLatLngToDivPixel(latLng);
        };

        const ne = fromLatLngToDivPixel(mapBounds.getNorthEast());
        const sw = fromLatLngToDivPixel(mapBounds.getSouthWest());
        if (this.div_) {
          this.div_.style.left = sw.x + 10 + "px";
          this.div_.style.top = ne.y + 10 + "px";
        }
      }
      onRemove() {
        if (!this.div_) return;
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
      }
    }
	// load a maps library and pass it to the class
    
    const map = new Map(vm.$refs.GoogleMap, {
      zoom: 14,
      disableDefaultUI: false,
      mapTypeControl: false,
      streetViewControl: false,
      mapTypeId: "roadmap",
      scrollWheel: true,
      fullscreenControl: true,
      center: {
        lat: 49.316666,
        lng: -123.066666,
      },
    });
	
    new CustomOverlay(map);