ユーザーがマーカーをクリックしたときに、情報が表示されたポップアップが表示されるようにしたいとします(例:マーカーが表示されているマーカーをクリックすると彼にこの場所のすべての情報)Meteor - Googleマップのマーカーのクリックイベント
これを行う最も簡単な方法は何ですか?
ユーザーがマーカーをクリックしたときに、情報が表示されたポップアップが表示されるようにしたいとします(例:マーカーが表示されているマーカーをクリックすると彼にこの場所のすべての情報)Meteor - Googleマップのマーカーのクリックイベント
これを行う最も簡単な方法は何ですか?
マーカにイベントリスナーを設定する方法については、Google Mapsのドキュメントを参照してください。テンプレートのonCreated()
またはonRendered()
にある可能性が最も高いBlazeテンプレートコードでこれを実行できるはずです。
ソリューションは、次のとおりです。
marker.addListener('click', function() {
swal({
title: "More details",
text: "Type what you want here",
});
});
よろしく、
このパッケージを追加しますhttps://github.com/dburles/meteor-google-maps
HTML
{{> googleMap name="map" options=mapOptions}}
クライアントJS
Meteor.startup(function() {
GoogleMaps.load({
v: '3',
key: 'YOUR_KEY'
});
});
Template.YOUR_TEMPLATE.helpers({
mapOptions:() => {
if (GoogleMaps.loaded()) {
return {
center: new google.maps.LatLng(YOUR_MAP_LAT, YOUR_MAP_LNG),
zoom: 1
};
}
}
});
Template.YOUR_TEMPLATE.onRendered(function(){
GoogleMaps.ready('map', function(map) {
let marker = new google.maps.Marker({
position: new google.maps.LatLng(YOUR_MARKER_LAT, YOUR_MARKER_LNG),
map: map.instance
})
let infowindow = new google.maps.InfoWindow({
content: 'SOME CONTENT'
})
marker.addListener('click', function(event){
infowindow.open(map.instance, marker);
})
});
});
Google Mapsは、そのようなもののカスタムイベントを生成します。 Reactを使用している場合は、[GM用に使用した[npmパッケージ](https://github.com/tomchentw/react-google-maps))がうまくいきました。その例の1つはカスタムを実装する方法でしたマーカー上のイベントをクリックします。 – CodeChimp
私はちょうど流星(フロントエンドのブレイズ)を使用しています.. –
すぐにGMAPを使用しないでください - 私の答えに記載されているパッケージを使用するか、ホイールを改革する時間を費やします。このパッケージはすべてのロードオーダー操作を処理します。 – NicholasByDesign