【googlemap API V3】地図上をクリックして、緯度・経度を簡単に取得するサンプル

  google API, JavaScript, jQuery, WEBサービス 

WordPressを使ったお仕事、特に不動産や駐車場のポータルサイトなんかを制作するときに、詳細な緯度経度を取得して、それをもとにgooglemapを表示したいことがあります。

表示する流れとしては、

緯度・経度をそれぞれ入力するカスタムフィールドを用意

カスタムフィールドに緯度・経度を入力

入力された緯度・経度からAPIを使って地図を出力
(マップの色やピンの画像を変更したいのでAPIを使用したほうが都合が良い)

こんな感じですね。

googlemapの画面で右クリックから取得する方法もあるのですが、
WordPressの投稿画面に直接地図を埋め込んで、そのまま値を使いたいという
わがままbodyなご要望をいただいちゃいまして。

カスタムフィールドの入力項目をカスタマイズする際に使用できるように
APIで緯度経度を簡単に取得するコードを書きました。

まずはAPIを利用してgooglemapを表示してみる

なにはともあれ、APIを読み込まないことには始まらないので、
htmlファイルのhead内でAPIを読み込みます。
ついでにjQueryも読み込みます。

 googlemapの基本的な表示はこんな感じで。

 
<div id=”map”>に地図が表示されます。
DOM Elementそのものを渡す必要があるので、IDでjQueryオブジェクトを取得した後get(0)してます。
(document.getElementById(“map”)でもよいのですが、今回はjQueryっぽい書き方をしたいのでこれで。)

マーカーの設置などはしていないので、
大阪駅を中心にしたまっさらな(?)googlemapが表示されます。

スクリーンショット 2015-07-28 8.18.58

クリックして行う処理を紐付ける

このマップ上をクリックした際に、緯度・経度を取得できるような処理を追加します。

 
マップ上で何らかのイベントと処理を紐付けるには「google.maps.event.addListener()」を使用します。
第一引数に対象のマップ、第二引数にイベント、第3引数に関数名を指定します。

第3引数で指定した関数はevent実行時に発生する様々な値を受け取ることができます。
firebugでちら見するとこんな感じ。

スクリーンショット 2015-07-28 8.43.30

受け取った値の中に緯度、経度が含まれているのでこれを取得して表示させれば目標達成です。

いざ、緯度経度を表示

html内に緯度経度を表示させるための領域を作ります。

 緯度経度はlatLngオブジェクトに入っているのでこちらを取得してjQueryで対象の領域に放り込みます。

 これで、地図上をクリックして、緯度・経度を簡単に取得する基本の形ができました。

スクリプトの最終形は下記

 
これをベースに普段はcustom field suiteの入力項目に放り込んだりして使用しているのですが、
そちらはまた別の機会に・・・

サンプルはこちらからどうぞ!

 

参考:

https://developers.google.com/maps/tutorials/

http://gmap3.blog52.fc2.com/blog-entry-13.html

 

Google Maps API V3 入門・初心者向けサンプル集には有用なサンプルがたくさんあるのでお勧めですよ。

 

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

ad

wpx

  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
PAGE TOP ↑