グ-グルマップのマ-カ-表示について質問させてください。

現在、WordPressの投稿を店舗の情報として固定ペ-ジのグ-グルマップにマ-カ-を立てています。
(投稿のひとつひとつが店舗になっています)
店舗情報にカスタムフィ-ルドで緯度(lat)と経度(lon)という情報を作り、その値に基づいてマップにマ-カ-を立てています。
が、現状では、店舗情報を登録する際、住所を緯度経度に変換してから登録しないとマップにマ-カ-が立たず、面倒くさいのです。
グ-グルマップのマ-カ-ポジション部分は以下のようなコ-ドにしているのですが、カスタムフィ-ルドの「住所(address)」を入力するだけでマップにマ-カ-を立てられるようにするにはどうすれば良いでしょうか。

position: new google.maps.LatLng( <?php echo post_custom("lat")?>,<?php echo post_custom("lon")?> ),

教えてください、よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2016/05/05 11:53:57
  • 終了:2016/05/10 17:42:10

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4325ベストアンサー獲得回数17732016/05/05 12:41:17

ポイント1200pt

Google Maps API の Geocoder クラスというのを使うと住所から緯度、経度などを取得できます。
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#Geocoder

google maps api 住所 緯度 経度」という感じでググると、サンプルソースを置いてあるところが見つかります。

  などなど

質問にあるコードの断片は、google.maps.Marker への引数でしょうか。
エラー処理などをバッサリと省き、エッセンスだけを抜き出すと、こんな感じになります(php の埋め込みはありますが、基本 javascript です)。

    var map = ...
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({
        address: "<?php echo post_custom('address') ?>"     // カスタムフィールド address の値
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            // 緯度、経度(検索結果のひとつ目)
            var latlng = results[0].geometry.location;

            // 緯度、経度を指定して Marker を作成
            var marker = new google.maps.Marker({
                        position: latlng,
                        map: map
                    });

            ...

        }
    });

ちょっと気を付けなければいけないのは、以下の 2点。

  • Geocoder#geocode メソッドは、非同期で処理を行うこと
  • 検索結果は、複数 返ってくることがあること
  • 逆に、実在する住所なのに位置情報を取得できないことがあること



Web API も用意されてます。
https://developers.google.com/maps/documentation/geocoding/intro?hl=ja#GeocodingRequests

こんなリクエストをと送ると、XML で京都駅の位置情報などが取得できます(%E4%BA%AC%E9%83%BD%E9%A7%85 は、京都駅を URL Encode したものです)。

http://maps.google.com/maps/api/geocode/xml?address=%E4%BA%AC%E9%83%BD%E9%A7%85

応答はこんな感じ。

<GeocodeResponse>
    <status>OK</status>
    <result>
        ...
        <geometry>
            <location>
                <lat>34.9858490</lat>
                <lng>135.7587667</lng>
            </location>
            ...
        </geometry>
    </result>
</GeocodeResponse>

# 先のマニュアルにあるように、JSON 推奨ですが。

こちらを使えば、file_get_contents() を使って、PHP 側で取得することも可能です。
複数の検索結果が返ってきたり、実在する住所でも検索結果が返ってこないこともある、というところは javascript の API と同じです。

他11件のコメントを見る
id:a-kuma3

20個くらいまでだったら、0.25秒待って 2回に分けて処理すれば、Geocoding API 自体が 0.5秒くらいかかるので、あまり気にならないかもしれません。

http://eiji3.wp.xdomain.jp/ の方で、ちょっと試してみました。
やっつけなので、20個までの対応ですけれど、10個を超えた分は 0.5秒待ってから位置情報を取得するようにしてみました。

2016/05/10 10:40:58
id:ykhpno1

本当に親身になっていただいた回答を複数いただき感服いたしました。
本番環境では緯度経度デ-タからの位置情報を使うことになると思うのですが、今回かいていただいたコ-ドは別の機会に活用させていただく所存でして、本当に助かりました。
ありがとうございました。

また、もうすぐ時間切れとなるもうひとつの質問、
「WordPressにおけるPHPの超初歩的な質問をさせてください」
http://q.hatena.ne.jp/1462302456
でもお世話になっております。

こちらの質問は間もなく終了してしまうので再質問させていただく形になりそうですが、
今回つくらせていただいたWordpressのテスト環境(http://eiji3.wp.xdomain.jp)で今度はこちらを再現しました。
もし差支えがない場合、こちらの方でもa-kuma3さんに回答をいただきたく存じます。

テスト環境のトップペ-ジには入力フォ-ムがあり、これに「世田谷区」と入力すると世田谷区にある店舗が、「千代田区」と入力すると千代田区の店舗が表示されるようになっています。
ただこのフォ-ムに「あ」と表示するだけでもマップが表示されてしまいます。
入力されたワ-ドを、住所に含む店舗がない場合、マップは非表示かつ「該当する店舗はありませんでした」と表示したい、という趣旨の質問になっております。
こちらでも助けていただければ有難く、なにとぞよろしくお願いいたします。

今回の質問では本当に素晴らしい対応をしていただき感激しております。
本当にありがとうございました。

2016/05/10 17:58:27

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません