<template>
  <div class="hotpay-map">
    <iframe
      :src="url"
      :style="styles"
      frameborder="0"
      style="border:0"
      allowfullscreen>
    </iframe>
  </div>
</template>

<style lang="scss" scoped>
  @import '../stylesheets/variables.scss';

  .hotpay-map {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
  }
</style>

<script>
  export default {
    name: 'hotpay-map',
    props: {
      data: {
        type: Object
      }
    },
    data: () => ({
      apiKey: 'AIzaSyAem_390pcuzycmsSnM2WsPJ56GD15FVDA'
    }),
    computed: {
      url () {
        return `https://www.google.com/maps/embed/v1/place?key=${this.apiKey}&q=${this.data.address}`
      },
      styles () {
        return {
          width: this.data.width,
          height: this.data.height
        }
      }
    }
  }
</script>
