MySQL&PHPでGoogleMapの埋込コードを記録、表示
商店街の店舗のページには、かならずといっていいほどショップの所在地を示すマップが付加されます。
HTMLのみで商店街のサイトをつくるとき、最近では多くの場合、店舗の所在地を示すグーグルマップをページに埋め込むことになります。
では、MySQLとPHPを利用して動的な商店街のサイトを作成するとき、店舗の地図はどうするかという問題が生じます。
当然のことながら、可能であれば、グーグルマップの埋込コードを他の店舗情報と一緒にMySQLなどのデータベースに記録し、必要に応じて表示しょうと考えます。
しかし、入力データのチェックなど入力ページ以降の幾つかのページを経由すると、グーグルマップの埋込コードの情報が普通の方法では他のページに伝わらないことが、程なくわかりました。
入力情報を他のページに伝えようとするとき、多くの場合「input hidden」を利用することになると思いますが、グーグルマップの埋込コードの情報は「input hidden」を経由すると、正確に伝わらなくなってしまうようです。
グーグルマップの埋込コードを動的なサイトでそのまま利用できればとても便利なはずですが、インターネットで調べても、MySQLでのグーグルマップのAPIの利用や緯度・経度の入力の情報はヒットしますが、埋込コードの利用の情報はまったく出てきません。
何度か試行錯誤した結果、グーグルマップの埋込コードを書き込む際に使ったtextareaを入力ページ以降のページでも情報伝達のツールとして使い、textareaが保有している情報をそのままMySQLに伝えることで、グーグルマップの埋込コードの情報をMySQLに正しく記録することができ、また抽出できることがわかりました。
入力ページ以降のtextareaはdisabledという属性を設定して、入力ページの情報の伝達のためだけに使用し、それらのページでは入力できないようにします。
結果として、MySQLを利用した動的な商店街のサイトでグーグルマップの埋込コードが使えるようになり、店舗の他の情報とともに、参照、修正、追加、削除など、動的なサイトの作成に必要な一連の操作ができるようになりました。
APIの利用や、緯度・経度の入力など、特別なことを行う必要がないので、とても便利です。
GoogleMapが記録を行うためのページ間を遷移していく様子