vueでGoogle mapを利用したい

Question

前提・実現したいこと

vueでgoogle mapを利用して地図を表示させたいが、表示させる方法がわからない。

前提条件として、
・APIキーはなし。Client IDを用いる。
・ライブラリを使用するのは問題ないが、map描画後に特定ボタンを押した際、mapの上にアイコンやタイルなどを重ねて表示させる必要があるのでその処理に対応できるようにする必要がある。

発生している問題・エラーメッセージ

実装方法を調べてみたが、ほとんどの方法がAPIキーを用いた方法。
用いない方法で実装ができればその方法で進めたいが、そのような方法はあるのか？。

試したこと

使用ライブラリ：vue2-google-maps, google-maps-api-loader
-> apiキーの設定をせずclientidの設定で動かせるか検証したが、表示されず。

補足情報（FW/ツールのバージョンなど）

vueに関してはそこまで知見は深くないです。
vueを用いる際、APIキーがないと実装不可ということであればその旨を伝えていただけると幸いです。

Answer 1

map描画後に特定ボタンを押した際、mapの上にアイコンやタイルなどを重ねて表示させる必要がある

この部分がイメージつかないのでなんとも言えませんが、以下コードです。

<style scoped src="./style.css" />
<template>
  <iframe
    :src="google_map.src"
    :width="google_map.width"
    :height="google_map.height"
    frameborder="0"
    style="border:0"
    allowfullscreen
  />
</template>

<script>
export default {
  head () {
    return {
      title: 'アクセス'
    }
  },
  data () {
    return {
      google_map: {
        src: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14853.183867933876!2d139.75231880670296!3d35.67943500037233!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b857628235d%3A0xcdd8aef709a2b520!2z5p2x5Lqs6YO95p2x5Lqs!5e0!3m2!1sja!2sjp!4v1586093437116!5m2!1sja!2sjp',
        width: '100%',
        height: process.client ? screen.availHeight / 2 : 450
      }
    }
  }
}
</script>

Comments

[vnsa7221]

こちらご回答いただきありがとうございました。
上記コードを参考にしながら今回は作成してみます。
ありがとうございました。