본문 바로가기
그냥개발

google map marker qucik start하는 도중, typescript가 동작하지 않았던 이유

계속항해 2025. 4. 5. 01:13
  • typescript파일을 트랜스파일하지 않았다.
    • typescript를 배우지도 않고 그저 공식문서에 있는것을 따라치고 실행해보았기 때문에 몰랐었다. 브라우저가 ts파일을 실행할 수 없다는 것을.
    • 아래의 코드를 index.js로 변경해야한다.
    • .ts파일을 컴파일해서 .js로 만들어야한다. 
      <script type="module" src="./index.ts"></script>
  • 이번 경험으로 배운 것
    • typescript는 브라우저에서 실행되지 않으니 컴파일해야한다.
    • npx tsc 커맨드를 사용하면 컴파일할 수 있다.
    • typescript에 namespace를 알 수 없다는 에러가 나올지라도 컴파일된 자바스크립트가
      lib를 인식할 수 있다면 코드는 돌아간다. 예를 들자면 html에 정의한 bootstrap loader같은거 말이다.
  • 사용한 예제코드 
    •   // Initialize and add the map
  let map;
  async function initMap(): Promise<void> {
    // The location of Uluru
    const position = { lat: -25.344, lng: 131.031 };

    // Request needed libraries.
    //@ts-ignore
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    // The map, centered at Uluru
    map = new Map(
      document.getElementById('map') as HTMLElement,
      {
        zoom: 4,
        center: position,
        mapId: 'DEMO_MAP_ID',
      }
    );

    // The marker, positioned at Uluru
    const marker = new AdvancedMarkerElement({
      map: map,
      position: position,
      title: 'Uluru'
    });
  }

  initMap();
    • <html>
<head>
  <title>Add Map</title>

  <link rel="stylesheet" type="text/css" href="./style.css" />
  <script type="module" src="./index.js"></script>
</head>
<body>
  <h3>My Google Maps Demo</h3>
  <!--The div element for the map -->
  <div id="map"></div>

  <!-- prettier-ignore -->
  <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
      ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html>

 

Reference
https://stackoverflow.com/questions/43555378/typescript-compiler-says-an-async-function-or-method-in-es5-es3-requires-the-p
https://developers.google.com/maps/documentation/javascript/adding-a-google-map?_gl=1*rt63i5*_up*MQ..*_ga*MTE1NDY2NDYzNC4xNzQzNzc5MDE5*_ga_NRWSTWS78N*MTc0Mzc3OTAxOC4xLjEuMTc0Mzc3OTAxOS4wLjAuMA..#typescript
chatGPT

티스토리툴바