V3】地図上をクリックして、緯度・経度を簡単に取得するサンプルwordpressやjQuery、macについてのtipsを中心に綴ります。WordPressを使ったお仕事、特に不動産や駐車場のポータルサイトなんかを制作するときに、詳細な緯度経度を取得して、それをもとにgooglemapを表示したいことがあります。緯度・経度をそれぞれ入力するカスタムフィールドを用意↓カスタムフィールドに緯度・経度を入力↓入力された緯度・経度からAPIを使って地図を出力(マップの色やピンの画像を変更したいのでAPIを使用したほうが都合が良い)こんな感じですね。googlemapの画面で右クリックから取得する方法もあるのですが、WordPressの投稿画面に直接地図を埋め込んで、そのまま値を使いたいというわがままbodyなご要望をいただいちゃいまして。カスタムフィールドの入力項目をカスタマイズする際に使用できるようにAPIで緯度経度を簡単に取得するコードを書きました。jQueryまずはAPIを利用してgooglemapを表示してみるなにはともあれ、APIを読み込まないことには始まらないので、htmlファイルのhead内でAPIを読み込みます。ついでにjQueryも読み込みます。charset="UTF-8"></script></head><body></body></html>googlemapの基本的な表示はこんな感じで。map;//ここで初期化。id=”map”>に地図が表示されます。Elementそのものを渡す必要があるので、IDでjQueryオブジェクトを取得した後get(0)してます。(document.getElementById(“map”)でもよいのですが、今回はjQueryっぽい書き方をしたいのでこれで。)マーカーの設置などはしていないので、大阪駅を中心にしたまっさらな(?)googlemapが表示されます。クリックして行う処理を紐付けるこのマップ上をクリックした際に、緯度・経度を取得できるような処理を追加します。map;//ここで初期化。});})(jQuery);</script>マップ上で何らかのイベントと処理を紐付けるには「google.maps.event.addListener()」を使用します。引数に対象のマップ、第二引数にイベント、第3引数に関数名を指定します。第3引数で指定した関数はevent実行時に発生する様々な値を受け取ることができます。firebugでちら見するとこんな感じ。受け取った値の中に緯度、経度が含まれているのでこれを取得して表示させれば目標達成です。いざ、緯度経度を表示html内に緯度経度を表示させるための領域を作ります。id="lng"></td></tr></table></body>緯度経度はlatLngオブジェクトに入っているのでこちらを取得してjQueryで対象の領域に放り込みます。$('#lat').text(lat);$('#lng').text(lng);}これで、地図上をクリックして、緯度・経度を簡単に取得する基本の形ができました。map;//ここで初期化。入門・初心者向けサンプル集には有用なサンプルがたくさんあるのでお勧めですよ。ブログの更新情報はこちらで配信しています。APIにSandboxなるステータスが追加されていた。アクセスできません」を解消する方法adwpxWordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。オリジナルテーマ制作のお供にどうぞ!定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。読みを繰り返すのがオススメ。超良書です!wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!サンプルが大充実!定番のjQuery入門書です。本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。5.7系で多言語サイト設定の基本をおさらい〜基本設定編〜【地味】window.open()で開いたポップアップ内から指定のリンクを親ウインドウの別タブで開くふと気づくとMarkerClustererのアイコン画像が404エラー・・・!対処法です。APIにSandboxなるステータスが追加されていた。bxSliderを使用時、任意のスライドで止めるVagrantの動作が遅かったので共有フォルダ設定とVirtualBox環境のメモリ設定を見直してみました。wordpressやjQuery、macについてのtipsを中心に綴ります。