Playing with Google Map API and Svelte

<script>
  // by anonymous
  import { onMount } from 'svelte';
  import {TOKEN} from "../config";

  let cityInputTxt = '';
  let map;
  let panorama;
  let marker;
  let google = window.google;
  // GEOCODING
  const geocoder = new google.maps.Geocoder();

  onMount(() => {

    // MAP
    const coords = { lat: 42.345573, lng: -71.098326 };
    map = new google.maps.Map(document.getElementById("map0"), {
      zoom: 15,
      center: coords,
    });

    // MARKER
    marker = new google.maps.Marker({
      position: coords,
      map: map,
      draggable: true,
      animation: google.maps.Animation.DROP,
    });
    marker.addListener("dragend", () => {
      // map.setZoom(8);
      // console.log(marker.getPosition());
      panorama.setPosition(marker.getPosition());
      geocodeLatLng(marker.getPosition())
    });

    // STREET VIEW
    panorama = new google.maps.StreetViewPanorama(
      document.getElementById("pano0"),
      {
        position: coords,
        pov: {
          heading: 34,
          pitch: 10,
        },
      }
    );
    panorama.addListener("position_changed", () => {
      // console.log(panorama.getPosition());
      marker.setPosition(panorama.getPosition());
      // const panoCell = document.getElementById("pano-cell");
      // panoCell.innerHTML = panorama.getPano();
    });

    // map.setStreetView(panorama);

    // PLACES
    const options = {
      componentRestrictions: { country: "it" },
      fields: ["formatted_address", "geometry", "name"],
      origin: map.getCenter(),
      strictBounds: false,
      types: ["geocode"],
    };

    const autocomplete = new google.maps.places.Autocomplete(document.getElementById("myInput"), options);

    autocomplete.addListener("place_changed", () => {
      const place = autocomplete.getPlace();
      console.log(place.name)
      console.log(place.geometry)
      console.log(place.geometry.location)
      console.log(place.geometry.viewport)

      // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
      }
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);

      panorama.setPosition(place.geometry.location)

    });

    function geocodeLatLng(coords) {
      geocoder.geocode({ location: coords }, (results, status) => {
        if (status === "OK") {
          if (results[0]) {
            // map.setZoom(11);
            cityInputTxt = results[0].formatted_address;

            /*const marker = new google.maps.Marker({
              position: coords,
              map: map,
            });*/
          } else {
            window.alert("No results found");
          }
        } else {
          window.alert("Geocoder failed due to: " + status);
        }
      });
    }

  })

  function getPlaces() {
    fetch(`https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Vict&types=geocode&language=it&key=${TOKEN}`)
      .then(res => res.json())
      .then(res => console.log(res))
    // console.log('hello', marker.getPosition().lat(), marker.getPosition().lng());
  }



</script>

Hello SImple Map
<button on:click={getPlaces}>get Places</button>

<input type="text" id="myInput" bind:value={cityInputTxt}>
<div id="map0"></div>
<div id="pano0"></div>
<style>
  #map0, #pano0  {
    width: 100%;
    height: 300px;
  }
</style>