WordPressからLeafletのポップアップを操作する

事例の概要

地図表示でマーカーを表示するとき、マーカーをクリックするとポップアップ表示するだけでなく、外部のテキストからポップアップを開くことができれば、より便利です(下図)。

この機能を実現するためには、Leaflet側のマーカーのポップアップとWordPressで表示するテキスト表示を動的に連動させることが必要です。

コード量も増えるので、再利用しやすいようにClassに分けて記述することが理想的です。

【お知らせ】
上記の事例3に示すオブジェクト指向(MVCモデル)の使い方については、本書で詳しく解説しています。


コード例


Fatal error: Uncaught Error: Class 'ViewPostCode' not found in /home/xs663544/kokontouzai.jp/public_html/wp-content/plugins/wp-OOP/wp-OOP.php:224 Stack trace: #0 /home/xs663544/kokontouzai.jp/public_html/wp-content/plugins/wp-OOP/wp-OOP.php(118): Model->execute(Object(stdClass)) #1 /home/xs663544/kokontouzai.jp/public_html/wp-content/plugins/wp-OOP/wp-OOP.php(45): Model->preparation(Object(stdClass)) #2 /home/xs663544/kokontouzai.jp/public_html/wp-content/plugins/wp-OOP/wp-OOP.php(37): Controller->modelview(Object(stdClass)) #3 /home/xs663544/kokontouzai.jp/public_html/wp-content/themes/twentytwenty-kokontouzai/template-parts/content.php(164): Controller->__construct(Array) #4 /home/xs663544/kokontouzai.jp/public_html/wp-includes/template.php(772): require('/home/xs663544/...') #5 /home/xs663544/kokontouzai.jp/public_html/wp-includes/template.php(716): load_template('/home/xs663544/...', false, Array) #6 /home/xs663544/kokontouzai.jp/public_html/wp-includes/general-template.php(204): locate_template(Array, true, false, Ar in /home/xs663544/kokontouzai.jp/public_html/wp-content/plugins/wp-OOP/wp-OOP.php on line 224