V3を使って実装しました。その辺の実装方法をまとめようと思ていますが、その前にその機能の基礎となるキーワードからの地図検索機能の実装方法をまとめておきます。APIを使うと凄く簡単に実装することができます。サンプル以下サンプルになります。キーワード入力フォームに[住所]、[建物名]、[緯度経度(緯度と軽度の間はカンマ区切り)]などを入力して、「地図検索」ボタンを押すと、フォームの下のスペースに地図が表示されるようになっています。APIについて簡単に説明しておきます。Mapsの機能を自分のWebサイトやアプリなどに追加したい時に利用するツールとなります。Mapsの多くの機能を実装するにはいろんな情報にアクセスする必要があります。APIということになります。Mapsの機能を簡単に扱えるようにしたツールとなっています。現在の正式なバージョンは「3」となります。APIは日本語のドキュメントもしっかり用意されていてかなり充実しています。公式ドキュメントだけでも十分と言えば十分ですが、併せて参考になりそうなWebサイトと本を紹介します。マップ資料Googleの公式ドキュメントです。全部目を通したわけではないですが、ほぼ全て日本語版となっています。ページも見やすく、内容もかなり充実しています。APIのレッスンページ。動画で実演してくれるのがありがたいですね。APIプログラミングこちらのサイトもかなり詳しい説明が書いてあります。ポイントごとに記事が書かれているので、やりたいことがピンポイントで確認できます。いう意味ではかなり重宝するのではないでしょうか。APIプログラミングガイド本で持っておきたいという方にはこちらオススメの本です。API担当のExpert4名が実践を交えて解説してくれています。内容もかなり充実しています。APIを営利目的で利用する場合、地図の読み込み制限があり、1日あたり最大25,000回まで許可されます。Businessライセンスを購入などする必要があります。詳細は以下でご確認可能です。Developersなお、非営利団体は、使用制限の対象にはなりません。Businessライセンスが供与されるということです。実装方法では、さっそく実装方法について説明していきます。手順ごとに3つに分けて説明します。WorldGoogleのドキュメントにもあるように、以下のソースコードで地図を表示させることが可能です。地図を表示させる要素。widthとheightを必ず指定する。APIをページに読み込んでおくということです。以下をheadタグ内に記述します。その際にAPIキーを取得してAPIのURLに埋め込みんでおきます。sensorパラメータも必須項目となり、ユーザーの位置情報を取得するのにセンサー(GPSなど)を使用するかどうかtrue、falseで設定します。src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script>地図を表示させる処理はinitialize()関数に定義して、ページが読み込まれた後に実行するようになっています。initialize()関数の中では、google.maps.Map()コンストラクタに地図を表示させる要素情報(第一引数)と地図表示に関するオプション情報(第二引数)を渡して、地図を表示させるインスタンスを生成しています。ここで注意が必要なことは、第一引数に指定する地図を表示させる要素は必ずdocument.getElementById()メソッドで指定するということです。mapOptions);地図表示に関するオプションに関しては以下のようなオブジェクトリテラルで定義します。google.maps.MapTypeId.ROADMAP};以上でWebサイトやアプリなどで地図を表示することができるようになりますが、ここでひとつやっかいなことがあります。表示させたい場所を指定するには、その場所の緯度と経度の情報が必要であるということです。自分の知りたい場所の緯度と経度をちゃんと把握している人なんていないでしょう。そこで、「住所」を地理的位置に変換する「ジオコーディング」処理が必要となってきます。キーワードから地図検索する機能を実装するにも、この処理が必要となってきます。APIでちゃんとサポートされています。この「ジオコーディング」の実装については次の項目で説明しますが、「ジオコーディング」を実装すると以下のような住所を緯度経度に変換する機能なんかも作ることができます。APIでもサポートされています。詳細はGoogleのドキュメントを見るのが一番だと思います。ジオコーディングサービス今回のサンプルでは、ジオコーディングの処理用に以下のようなcodeAddress()関数を定義しました。引数に「住所」情報を指定することで、緯度・経度情報に変換して、地図に反映する仕組みになっています。地図上に目印となるマーカーを設定います。});}ここでポイントとなるのが、google.maps.Geocoder()オブジェクトのgeocode()メソッドです。geocode()メソッドはジオコーディングサービスへのリクエストを開始します。サンプルではnewでgoogle.maps.Geocoder()のインスタンスを生成してgeocoder.geocode()として実行しています。引数には、GeocodeRequestオブジェクトリテラル(第一引数)と、ジオコーダの結果が取得されたときに実行するコールバックメソッド(第二引数)を指定します。第二引数に指定するコールバックには、結果(results)と状態(status)を受け取る2つのパラメータを指定します。処理の流れとしては、以下のようになっています。位置情報を指定せずに上記のinitialize()関数と同じ処理を実行します。次に取得した住所をジオコーディングサービスを使って、緯度経度情報に変換し、その結果を受け取ってコールバック関数に渡します。コールバック関数では、変換した緯度経度情報を地図に反映させ、さらにマーカーを設置します。APIには使用制限があります。Business利用者は、1日あたり100,000件までリクエスト実行可能)。APIはGoogleマップ上の結果表示と組み合わせる場合にのみ使用でき、地図に表示せずにジオコーディングの結果だけを利用することは禁止されています。詳細は以下でご確認可能です。検索フォームを実装する最後に検索フォームの実装です。サンプルのフォームは以下のようになっています。id="button"></form>JavaScript部分は以下の通りです。codeAddress(address);}</script>まとめるとまとめるとサンプルのソースコードは以下のようになります。意外と忘れがちなのが、地図を表示させる要素のwidthとheightの指定です。処理は書けているはずなのに、要素の幅と高さの指定がないために地図が表示されなくてハマることがあるので注意です。地図上に目印となるマーカーを設定います。APIを使って「キーワードから緯度経度を取得し地図を検索する」機能を実装する方法となります。APIを使っていく上での基礎となります。APIはかなりの機能を持っています。いろんな機能を盛り込んで、面白いサービス作りたいですね。maechabinホーム目次トップ。