<template>
  <div class="google-map">
  </div>
</template>

<script>
import * as GoogleMapsLoader from 'google-maps'

export default {
  name: 'google-map',

  props: {
    apiKey: {
      type: String,
      required: true
    }
  },

  mounted () {
    const _GoogleMapsLoader = GoogleMapsLoader;
    _GoogleMapsLoader.KEY = this.apiKey
    /* We stick to version updates instead of weekly channel update because
       using weekly updates you need to test them, but we prefer to use stable
       versions. */
    _GoogleMapsLoader.VERSION = '3.35'
    _GoogleMapsLoader.load((google) => {
      /* eslint-disable no-new */
      new google.maps.Map(this.$el, {
        center: new google.maps.LatLng(44.5403, -78.5463),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
      })
    })
  },
}
</script>

<style lang="scss">
.google-map {
  height: 100%;
}
</style>
