2018年12月16日0件のコメントはじめにVue.jsでWebサービス開発しているのですが、GoogleMapを埋め込んでみたくなったので、vue2-google-mapsを触りながらサンプルプログラムを作ってみました。試行錯誤しながらやったので、備忘と共有に記事にしておきます。今回は地図に表示する位置情報の取得にホットペッパーのAPIを使いましたが、本記事ではAPI利用部分は割愛し、vue2-google-mapsの導入にフォーカスしています。作ったものVue.jsで作ったWebサイトにGoogleマップを埋め込む地図をドラッグして表示エリアを移動した際に、中心のピンも合わせて移動する(Uberっぽい動き)現在表示している地図の中心の座標(Center)、表示エリア(Bounds)を取得し、ホットペッパーのグルメAPIで検索するホットペッパーのAPIレスポンス(お店情報)をMaker表示する。MarkerをクリックするとinfoWindowに情報表示するvue2-google-mapsのインストール、設定インストールまずはプロジェクトフォルダにvue2-google-mapsをインストールします。プロジェクトフォルダに移動して以下のコマンドを実行です。コンポーネントの読み込みと、設定情報を記載します。KEYはGoogleCloudConsoleで取得が必要です。お持ちでない方は以下の記事が参考になります。取得する設定は以上です。あとはアプリケーションの開発です。地図、マーカーの表示まずはページを表示した際に地図とマーカーを表示する部分です。scoped>省略</style>とてもシンプルに実装できました。Markerをv-forで繰り返しで表示できるのがとても楽です。地図の中心座標(Center)、表示領域(Bounds)を取得する地図の表示中領域のお店情報を取得したいとした場合、以下の情報が必要となります。表示エリアの緯度(min、max)、経度(min、max)これらの取得をやってみました。2通りの方法でやれそうです。}}</script><GmapMap>タグに「ref=”map”」を追加ボタンクリック時のgetInfo()にてcenterとboundsを取得します。調べてみると、以下がイベントで取得できました。イベントハンドラで緯度経度が取得できるので、これを利用することも可能です。変更をリアルタイムに追いかけるときとかには使えます。}}</script>GmapMapに@center_changedと@bound_changedの2つのイベントハンドラを追加しています。関数の引数にそれぞれcenterとboundsのオブジェクトが渡されるので、オブジェクトから緯度経度を取得することができます。APIの取得イメージをもとにmarkerとinfoWindowを表示する長くなってしまいましたが、ようやく最終成果物の作りです。出来上がりのイメージ上述したイメージになります。}}</script>こんな感じです!API連携の部分は参考になりませんが、infoWindowの使い方を参考にしていただければと思います。さわってみた感想とりあえず最低限使ってみたいものは実装できそうだなと感じました。ソースは短く実装できるのでちょっと使うとかだと便利だと思います。アニメーションとかどうやって組み込むのか謎な部分もあります。詰まったときにもドキュメントがほぼなく、あってもstackOverFlowとかしかないのは辛いですね。カツオが開発したWebサービスです。「セールサーチ」ネットショップのセール情報の検索サイト!平成の想い出を気軽に年表にしてシェアすることができるサービスです。コメントをキャンセルメールアドレスが公開されることはありません。非エンジニアが個人開発したWebサービスをリリースしてみてfirestoreのセキュリティルール設定(firebaseでユーザー・役割ごとの権限制御)最近のコメント33歳。起業について思うこと。