🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

1回答

1522閲覧

Vue with google map API - 動的に生成されるMarkerにv-on関数を紐づける実装

ultimate_newbie

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2021/03/10 14:44

毎度お世話になります。
google map APIを題材に、JS及びVueの勉強をしております。
自分で考えてもどうしても実現できない機能がありますので、お力をお貸しいただけますと幸いです。

実現したいこと:Ajaxで定期的にDBから新規ユーザー情報を取得し、新規ユーザーが追加されたら、Google Mapにそのユーザーの場所をMarkerで表示し、ユーザー名、写真及び「プロフィール」ボタンを付与する。
「プロフィール」ボタンをクリックすると、ユーザーのプロフィールがalertで表示される。

利用している環境:Laravel6 Vue2 Google maps javascript API

現状のコード

<template> <div> <div class="map" ref="googleMap" /> </div> </template> <script> import { Loader } from '@googlemaps/js-api-loader'; export default { mounted() { const loader = new Loader({ apiKey: "MY API KEY", }); loader.load().then(() => { // googlemap生成処理 }); setInterval(this.download, 1000); }, methods:{ download:function(){ axios.get('/home/ajax/download').then((res)=>{ this.users = res.data; this.users.forEach(function( user ) { this.markers[user.id] = new google.maps.Marker({ position: {lat: user.latitude, lng: user.longitude}, map: this.map, title: user.name, }); this.markers[user.id].addListener("click", () => { var content = '<div>' +user.name+ '</div>' content += '<img src="' + user.imgpath + '">' content += '<button v-on:click="btn_profile(user.msg)">プロフィール</button>' new google.maps.InfoWindow({ content }).open(this.markers[user.id].getMap(), this.markers[user.id]); }); },this); }).catch(error => console.log(error)) }, btn_profile:function(msg){ alert(msg); }   } } </script>

参考にした情報:過去の同種質問

現状のコードでうまくいかない理由は、上記参考情報を読むことで判明しております。(downloadメソッドに記述したv-on:clickのコンパイルが走らないため)
しかし、上記参考情報に倣ってあらかじめtemplateにv-forで箱を準備しようとしても、contentの内容(user.msg)自体がaxiosで不定期に飛んでくるため、どのような実装にしたらよいのか、イメージがわかずにいます。

どなたかお知恵を拝借できませんでしょうか。

どうぞ宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

マーカーの内部HTML(content)内のボタンに紐付けたv-onディレクティブを利かせる方法はわかりませんでした。
その意味ではタイトルに対する直接の答えにはなっていませんが、
「実現したいこと」のうち「『プロフィール』ボタンをクリックすると、ユーザーのプロフィールがalertで表示される。」の部分について、下記のような形ではどうでしょうか。

・markerのinfowindowのcontent(HTML)設定時、あらかじめマーカーと紐づいたボタンID(ここではユーザーIDと同一にしています)をHTMLに書き込んでおきます。
・マーカークリック時に、infowindowのdomreadyイベントが発火するので、そのタイミングで実体化したinfowindow内のボタン要素を、用意しておいたボタンIDで特定し、clickイベントを紐づけます。

data() { return { (略) /* clickイベントの二重登録を防ぐための配列。 イベントセット済みのボタンのIDを格納する。*/ eventSetIds: [], (略) } }, methods: {   (略) download: function() { const self = this; axios.get('/home/ajax/download') .then(res => { this.users = res.data; this.users.forEach(function(user) { this.markers[user.id] = new google.maps.Marker({ position: { lat: user.latitude, lng: user.longitude }, map: this.map, title: user.name }); const content = `<div>${user.name} </div><img src="${user.imgpath}">` + `<button id="${user.id}">プロフィール</button>`; const infowindow = new google.maps.InfoWindow({ content }); this.markers[user.id].addListener("click", () => { infowindow.open( this.markers[user.id].getMap(), this.markers[user.id] ); }); // infowindow構築時にボタンに対するclickイベントを付加する google.maps.event.addListener(infowindow, "domready", function() { const btnid = user.id; // clickイベントの二重登録を防ぐためのチェック if (!self.eventSetIds.includes(btnid)) { self.eventSetIds.push(btnid); // content内に記述したボタンにclickイベントを登録する document.getElementById(btnid) .addEventListener("click", function(e) { self.btn_profile(user); }); } }); }, this); }) .catch(error => console.log(error)); }, btn_profile(user) { console.log(`Called btn_profile(user.id="${user.id}")`); alert(user.msg); } },

投稿2021/03/13 04:25

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問