TypeScriptでGoogle Maps

さて、VS CodeでTypeScriptをかけるようになったら、次はGoogle MapsをTypeScriptでかきたい。

課題としてはGoogle Mapsにお絵描きだ。
はて？TypeScriptソース内にGoogle Maps JavaScript APIをどうやって導入すればいいんだろう、と思っていたら、AngularでGoogle Maps JavaScript APIを使っている投稿があるので参考にさせてもらう。

1. Install Google Maps types for typescript support

   npm install --save @types/googlemaps

2. Import the Google Maps types into component

   import {} from 'googlemaps';

3. 以下の１行を記載した新規TSファイル「index.d.ts」を設置

   declare module 'googlemaps';

これで、TypeScript内で「google.maps」が使えるようになった。

import {} from 'googlemaps';

class MyMap {
    map: google.maps.Map;
    poly: google.maps.Polyline;
    isDrawing: boolean = false;

    constructor(map: HTMLElement) {
        this.map = new google.maps.Map(map, {
            zoom: 7,
            center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
        });
  
        this.map.addListener('rightclick', e => {
            // start polyline
            if(!this.isDrawing) {
                this.poly = new google.maps.Polyline({
                    strokeColor: '#000000',
                    strokeOpacity: 1.0,
                    strokeWeight: 3,
                    clickable: false
                });
                this.poly.setMap(this.map);
            }
            this.isDrawing = !this.isDrawing;
        });
        this.map.addListener('mousemove', e => {
            if(this.isDrawing) {
                this.addLatLng(e);
            }
        });
    }

    private addLatLng(event: any) {
        var path = this.poly.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(event.latLng);
    }
}
export = MyMap;

var myMap:MyMap = new MyMap(
    document.getElementById('map')
);