Creating a google map with markers component with Vue js / TypeScript

I had to port google map JavaScript API to Vue js, that can pass in Lat/Long list, and other parameters.

Before we get into the component, remember to include the Google API map javascript in the main .html file

<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY"></script>

Below is the completed component.

<template>
    <div class="map" ref="googleMap"></div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { RouteURL } from "../../../shared/constants";
import { urlHelper } from "../../../shared/urlHelper";
import ILocation } from "../shared/models";
declare var google: any;
@Component({
  components: {},
  props: {
    locations: {
      type: Object,
      required: true
    },
    disableDefaultUI: {
      type: Boolean,
      required: true
    },
    zoom: {
      type: Number,
      required: true
    },
    scaleControl: {
      type: Boolean,
      required: true
    },
    zoomControl: {
      type: Boolean,
      required: true
    }   
  }
})
export default class GoogleMapWithMarkersComponent extends Vue {
  map: any;
  markers: any = [];
  bounds = new google.maps.LatLngBounds();
  imagePath: string = "/assets/img/pins/";

  created(){
    // Can't do it here DOM is NOT ready    
  }

  mounted() {
    this.map = this.initMap(); // have to wait untill DOM is ready    
    this.drawMap(this.map, this.$props.locations)
  }

  drawMap(map: any, locations: ILocation[]){
    this.buildMarkers(map, locations);
    map.fitBounds(this.bounds);
    map.panToBounds(this.bounds);
  }

  initMap(): any {
    const element: any = this.$refs.googleMap;
    return new google.maps.Map(element, {
      zoom: this.$props.zoom,
      center: new google.maps.LatLng(-37.7936532, 144.9637612),
      disableDefaultUI: this.$props.disableDefaultUI,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      gestureHandling: "greedy",     
      scaleControl:this.$props.scaleControl,
      zoomControl:this.$props.zoomControl
    });
  }

  buildMarkers(map: any, locations: ILocation[]) {
    this.bounds = new google.maps.LatLngBounds();
    for (let location of locations) {
       var marker: any =  this.constructMarker(map, location.Latitude, location.Longitude, `${this.imagePath}blue.png`);
       this.bounds.extend(marker.getPosition());
    }
  }

  constructMarker(map: any, latitude: number, longitude: number, icon: string): any{
   return new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        icon: { url: icon, scaledSize: new google.maps.Size(27, 43) },
        map: map
      });
  }

}
</script>
<style scoped>
.map {
  border-radius: 8px;
  height: 300px;
}
</style>

Now you can use it like this parent component

<Map :name="'locations'" 
     :locations="locations" 
     :disableDefaultUI="true" 
     :zoom="12" 
     :scaleControl="false" 
     :zoomControl="false"></Map>

There you go, hope this will help anyone looking for a map integration to Vue js.