sherlockhomeless回答ポイント 3000pt

Google Mapの検索結果を自サイトで実現したい

google mapで、緯度経度、もしくは住所の文字列を入れて検索した形で、地図を表示させたいです。
といっても表示させたいのは、Googleマップのページではなく、自サイトです。
APIを使えば出来るような気がします。
実際、

Google Mapsにリンクを張る時に、緯度経度を指定してその場所に… - 人力検索はてな
http://q.hatena.ne.jp/1250733878

という質問のページにy-kawazさんという方が、

http://www.kawaz.jp/tmp/maps/marker-by-param.html?x=139.6995289&y=35.6563445&zoom=18

というリンクを貼っています。
まさにこれを私はやりたいのです。xの経度、yの緯度で、地図の表示結果を自サイトのドメイン（上記の場合はwww.kawaz.jp）で実現したいです。
どういったAPIを使えばよいのか、コードを埋め込む必要があるとすればどこに埋め込めばよいのか等、お教えいただけますでしょうか。
よろしくお願い致します。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

a-kuma32016/07/30 10:21:55
満足3000pt
緯度と経度を指定する場合にはこんな感じ。
```
<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
    // パラメータの切り出し
    var param = {}
    location.search.substring(1).split("&").forEach(function(s) {
        var a = s.split('=');
        param[a[0]] = a[1];
    });

    // 拡大
    var zoom = parseInt(param['zoom']);

    // 緯度、経度
    var latlng = new google.maps.LatLng(param['lat'],param['lng']);

    // 地図
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: zoom,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // マーカー
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    
});
</script>
<style>
#map {
    width: 1000px;
    height: 500px;
}
</style>

<div id="map"></div>
```
パラメータは以下の三つ。
- lat：緯度
- lng：経度
- zoom：拡大度
こんな感じで使うのを想定しています。
```
http://my.site/map?lat=35.681298&lng=139.7662469&zoom=7
```
Google Maps API を使う場合には、API キーが必要です（上記のソースでは省略してます）。
- Google Maps JavaScript API | Google Developers
- Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers
住所から検索するには Geocoder というクラスを使います。
検索してから地図を表示するには、こんな感じになります（スクリプト部分だけ）。
```
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        address: param['address']
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0]);
            var latlng = results[0].geometry.location;

            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: zoom,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
        }
    });
```
jsFiddle で試してみたのがこちら（パラメータはソースに埋め込んでます）。
https://jsfiddle.net/a9x8fw5a/embedded/

追記です。
すみません、住所から表示する方法も試してみようと思ったのですが。
Geocoder は、以下のように使います。
```
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        // Geocoder のパラメータ

    }, function(results, status) {
        // もし、候補が見つかったら
        if (status == google.maps.GeocoderStatus.OK) {
            /*
                ★検索結果 (results) から緯度、経度を取り出して処理をする
            */
        }
    });
```
「★検索結果 (results) から緯度、経度を取り出して処理をする」の部分は、緯度、経度を直接指定したときと、ほぼ同じコードになります。

緯度、経度を使うときと同じように、住所を検索する場合のコードをまるっと乗せておきます（最初の回答で書いたコードでは、一ヶ所考慮漏れがあったし）。
```
<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
    // パラメータの切り出し
    var param = {}
    location.search.substring(1).split("&").forEach(function(s) {
        var a = s.split('=');
        param[a[0]] = a[1];
    });

    // 拡大
    var zoom = parseInt(param['zoom']);

    // --- ここまで、緯度、経度をパラメータで渡すときと、同じです


    // Geocoder で "address" で地図を検索
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        address: decodeURIComponent(param['address']),  /* 日本語を通すには decode が必要 */
    }, function(results, status) {
        // もし、候補が見つかったら
        if (status == google.maps.GeocoderStatus.OK) {

            // --- ここから、緯度、経度をパラメータで渡すときと、ほとんど同じです

            // 最初の検索結果の緯度、経度
            var latlng = results[0].geometry.location;

            // 地図
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: zoom,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            // マーカー
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });

            // --- ここまで
        } else {
            var e = document.getElementById("map");
            e.innerHTML = "見つかりません<br>キーワード：" + param['address'];
        }
    });

});
</script>
<style>
#map {
    width: 1000px;
    height: 500px;
}
</style>

<div id="map"></div>
```
パラメータは以下の二つ。
- address：住所（検索文字列）
- zoom：拡大度
こんな感じで使うのを想定しています。
```
http://my.site/map?address=皇居&zoom=15
```
再度、追記です。
そして皇居周辺のラーメン屋さんを検索したい場合、google mapだと「東京都千代田区千代田１－１ラーメン屋」と検索すると、周辺のラーメン屋がマッピングされて表示されます。
　　...
こういった表示方法は出来ないでしょうか？
Google Places API というものを使いました。
```

<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&libraries=places&key=..."></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
    // パラメータの切り出し（ここが抜けてました）
    var param = {}
    location.search.substring(1).split("&").forEach(function(s) {
        var a = s.split('=');
        param[a[0]] = a[1];
    });

    // 拡大
    var zoom = 16;	// 仮

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        address: decodeURIComponent(param['address']),  /* 日本語を通すには decode が必要 */
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            // 緯度、経度
            var latlng = results[0].geometry.location;

            // 地図
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: zoom,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });


            // キーワードで検索
            var ps = new google.maps.places.PlacesService(map);
            ps.nearbySearch({
                name: decodeURIComponent(param['keyword']),
                radius: 5000,   /* 半径 5km の範囲 */
                location: latlng,
            }, function(results, status, page) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {

                    var bounds = new google.maps.LatLngBounds();

                    results.forEach(function(r) {
                        var latlng = r.geometry.location;
                        var title = r.name + "\n" + r.vicinity;

                        // マーカー
                        var marker = new google.maps.Marker({
                            position: latlng,
                            title: title,
                            map: map
                        });

                        bounds.extend(latlng);
                    });

                    map.fitBounds(bounds);
                }

                // 拡大率は 16 まで
                var zoom_listener = google.maps.event.addListener(map, "idle", function() { 
                    if (map.getZoom() > 16) {
                        map.setZoom(16); 
                    }
                    google.maps.event.removeListener(zoom_listener); 
                });
            });


        } else {
            var e = document.getElementById("map");
            e.innerHTML = "見つかりません<br>キーワード：" + param['address'];

        }
    });



});
</script>
<style>
#map {
    width: 1000px;
    height: 500px;
}
</style>

<div id="map"></div>
```
パラメータは以下の二つ。
- address：住所（検索文字列）
- keyword：キーワード
address で地図を探し、そこを中心にして半径 5km の範囲で keyword に当てはまる地図情報を探します。
拡大度は、16 を最大として検索結果が入るサイズに調整しています。

こんな感じで使うのを想定しています。
```
http://my.site/map?address=皇居&keyword=ラーメン
```
＃すみません、Places API を使うサンプルで、パラメータを切り出す部分が抜けてました
スター
- 14件のコメントを見る
- sherlockhomeless 2016/07/30 17:21:20
  
  a-kuma3さんありがとうございます！
  a-kuma3さんにお教えいただきましたコードで、もうちょっとでうまくいきそうだったのですが。
  地図が一瞬、読み込まれるのですが…すぐに切り替わり、
  
  「エラーが発生しました。
  このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」
  
  と出てきてしまいます。
  私が調べたところ、
  http://nendeb.com/429
  によると、どうやらGoogle MapsのAPIキーなるものが必要らしい？というわけで、なんとかそれは取得できまして。
  a-kuma3さんが記載していただいたコードの、
  
  <script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false"></script>
  
  の部分だけ、<script src="https://maps.googleapis.com/maps/api/js?key=（Googleで取得したAPIキー）" ></script>
  
  スター
- sherlockhomeless 2016/07/30 17:21:50
  
  に変えてみたのですが。
  APIキーを入れたにも関わらず、同じように一瞬、地図が読み込まれて、また「エラーが発生しました…」と出てきてしまいます。
  APIキーを入れる場所が間違っていたのでしょうか。
  
  もし取得したAPIキーの情報を入れるとするとなると、a-kuma3さんが記載していただいたソースコードのどこに入れたらよいでしょうか？
  
  たびたびお手数おかけします、よろしくお願い致します。
  
  スター
- a-kuma3 2016/07/30 17:45:19
  
  <script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false"></script>
  この部分を
  <script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&key=APIキー"></script>
  というように変えれば良いです。
  script タグの src 属性のお尻に & をつけて、key=取得したAPIキー をくっつけます。
  
  使ってるブラウザは何でしょうか。
  javascript のコンソールの表示の仕方は分かりますか？
  今どきのブラウザだと F12 を押すと開発者向けの機能が表示されて、いくつかクリックをすると（見たら分かるはず）コンソールを表示できます。
  
  APIキーを指定してない、正しく指定できていない、とかだと、以下のようなエラーメッセージがコンソールに表示されているはずです。
  Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
  
  私が調べたところ、
  http://nendeb.com/429
  によると、どうやらGoogle MapsのAPIキーなるものが必要らしい？というわけで、なんとかそれは取得できまして。
  そのサイトだったら、こちらも確認しておいた方が良さそうです。
  http://nendeb.com/276
  
  どんなページで使うか、というのを登録しなきゃいけなくなってます。
  ここ（HTTP リファラー）を、実際に使うページの URL が含まれるように設定してみてください。
  
  スター
- sherlockhomeless 2016/07/30 22:46:10
  
  a-kuma3さんありがとうございます。
  Google Maps APIだと「Google Maps API error: RefererNotAllowedMapError」みたいなのが出てきてうまくいかなかったのですが、Google Maps JavaScript APIを使うとうまくいきました！
  ありがとうございます。
  
  すみません、住所から表示する方法も試してみようと思ったのですが。
  「var param = {}location.
  ～
  マーカーvar marker = new google.maps.Marker({position: latlng,map: map});});」を、a-kuma3さんが記載してくださったGeocoderというクラスにさしかえて。
  
  http://（自分のサイトドメイン）/map?lat=（住所情報）
  
  のようにURLを入れてみると。
  地図が真っ白で何も表示されない状況になりました…。
  たびたびすみません、住所から地図を出す方法もご教授いただけないでしょうか。
  よろしくお願い致します<m(__)m>
  
  スター
- a-kuma3 2016/07/31 09:27:29
  すみません、住所から表示する方法も試してみようと思ったのですが。
  Geocoder は、以下のように使います。
  var geocoder = new google.maps.Geocoder(); geocoder.geocode({ // Geocoder のパラメータ }, function(results, status) { // もし、候補が見つかったら if (status == google.maps.GeocoderStatus.OK) { /* ★検索結果 (results) から緯度、経度を取り出して処理をする */ } });
  「★検索結果 (results) から緯度、経度を取り出して処理をする」の部分は、緯度、経度を直接指定したときと、ほぼ同じコードになります。
  
  回答に追記したので、確認してみてください。
  
  スター
- sherlockhomeless 2016/07/31 17:44:36
  
  ありがとうございます。
  住所の方もうまくいきました！
  すみません、これで最後にしますので、もう1つ、お願いがあります。
  
  例えば皇居を例にすると、住所は「東京都千代田区千代田１－１」になります。
  そして皇居周辺のラーメン屋さんを検索したい場合、google mapだと「東京都千代田区千代田１－１ラーメン屋」と検索すると、周辺のラーメン屋がマッピングされて表示されます。
  https://www.google.co.jp/maps/search/%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8D%83%E4%BB%A3%E7%94%B0%E5%8C%BA%E5%8D%83%E4%BB%A3%E7%94%B0%EF%BC%91%E2%88%92%EF%BC%91+%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3%E5%B1%8B/@35.6847878,139.7399841,14z/data=!3m1!4b1
  こういった表示方法は出来ないでしょうか？
  
  スター
- a-kuma3 2016/08/01 10:21:14
  
  そして皇居周辺のラーメン屋さんを検索したい場合、google mapだと「東京都千代田区千代田１－１ラーメン屋」と検索すると、周辺のラーメン屋がマッピングされて表示されます。
  　　...
  こういった表示方法は出来ないでしょうか？
  回答に追記しました。
  
  ＃ Geocoder の結果を複数処理すれば良いんだろう、とか思っていたら、ひとつしか返ってこなくて、ちょいと手こずったのは内緒です　:-)
  
  スター
- sherlockhomeless 2016/08/02 06:34:35
  
  ありがとうございます。
  さっそく試してみたのですが。
  a-kuma3さんが紹介してくださったGoogle Places APIは、
  
  Places API for Android
  Places API for iOS
  Places JavaScript Library
  Places API Web Service
  
  の4つありましたので、まずPlaces JavaScript Libraryをクリックしてみました。
  しかし「キーの取得」が選べなかったので、Places API Web Serviceでキーを取得し、そのキーをa-kuma3さんのコードの“=places&key=...”の三点リーダの箇所に入れて地図の表示を試みました。
  
  すると…読み込んでもなぜか真っ白な状態で、地図が表示されませんでして。
  一瞬表示されるということもないのです。
  
  Google Maps APIはたくさんありますが… http://f.hatena.ne.jp/sherlockhomeless/20160802055823
  Google Maps Javascript APIの方？かと思いまして「Google API コンソールで Google Maps JavaScript API Google Maps Geocoding API Google Maps Directions API Google Maps Distance Matrix API Google Maps Elevation API Google Places API Web Service を有効にするアプリケーションの登録」をやってみまして、そちらのAPIキーを使ってみたのですが。
  やはり真っ白で何も表示されない状況です…たびたびお手数お掛け致します、考え得る原因と対処法をご教授いただけないでしょうか。
  
  スター
- a-kuma3 2016/08/02 06:42:09
  
  すると…読み込んでもなぜか真っ白な状態で、地図が表示されませんでして。
  一瞬表示されるということもないのです。
  ライセンス云々ではなく、javascript のエラーが出ているような気がします。
  javascript のコンソールでエラーの有無と内容を確認してみてください。
  
  スター
- sherlockhomeless 2016/08/02 07:24:52
  
  a-kuma3さんがおっしゃるようにjavascriptのエラーが出ていました。
  http://f.hatena.ne.jp/sherlockhomeless/20160802072135
  
  ?address=皇居&keyword=ラーメン:115 Uncaught ReferenceError: param is not defined
  maps.google.co.jp/maps-api-v3/api/js/25/11/intl/ja_ALL/util.js:211 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
  
  とありますが…何を意味しているのでしょうか…。
  
  スター
- a-kuma3 2016/08/02 08:43:20
  
  すみません、パラメータを切り出す処理の部分を貼り忘れてました　m(_ _)m
  
  最後の Google Places API を使うサンプルを、（追記ではなく）修正しましたので、確認してみてください。
  
  スター
- sherlockhomeless 2016/08/03 00:07:27
  
  a-kuma3さんありがとうございます、うまくプロットされました！
  感謝感謝なのですが…本当に申し訳ないです、可能でしたら教えていただきたいのですが。
  プロットされた地図の上のスポットのマーク（赤丸枠の中の黒丸など）をクリックしたりしてみたのですが。
  ラーメン屋の情報が表示されないのです。
  
  通常のGoogle Mapでは「東京都千代田区千代田１－１　ラーメン屋」など検索すると、スポットのマークの横にお店の店名等の情報が記載されているのですが。
  同じように、マークと同時に店舗名等の情報も表示することは出来ないでしょうか。
  
  本当に何度もすみません、もし可能であれば、よろしくお願いしますm(__)m
  
  スター
- sherlockhomeless 2016/08/03 06:52:05
  
  勘違いしてましった、マークをクリックせずにマウスカーソルを合わせると情報が出てきました！ありがとうございましたm(__)m
  
  ただスマホからですと、スポットのアイコンをタップしても長押ししても出てこない状況でして…ここに新しい質問 http://q.hatena.ne.jp/1470174671 をさせていただきましたので、もしスマホからのスポット情報の閲覧も可能になる方法がありましたら、お手すきの時にご回答いただけますと幸いです。
  よろしくお願い致します。
  
  スター
- a-kuma3 2016/08/03 08:34:32
  
  プロットされた地図の上のスポットのマーク（赤丸枠の中の黒丸など）をクリックしたりしてみたのですが。
  ラーメン屋の情報が表示されないのです。
  マークをクリックせずにマウスカーソルを合わせると情報が出てきました！
  回答にはっきり書いてなくて、すみません。
  このあたりも、API を使うときには作り込んであげる必要があります。
  
  プログラムなので、店舗の情報を吹き出しを表示したりマーカーの横に表示したりというのも、どうやるかを決めれば大抵のことはできます。
  簡単にできるか、面倒か、というのはありますけれど　:-)
  
  スター

Google Mapの検索結果を自サイトで実現したい

ベストアンサー

a-kuma32016/07/30 10:21:55
満足3000pt

sherlockhomeless 2016/07/30 17:21:20

sherlockhomeless 2016/07/30 17:21:50

a-kuma3 2016/07/30 17:45:19

sherlockhomeless 2016/07/30 22:46:10

a-kuma3 2016/07/31 09:27:29

sherlockhomeless 2016/07/31 17:44:36

a-kuma3 2016/08/01 10:21:14

sherlockhomeless 2016/08/02 06:34:35

a-kuma3 2016/08/02 06:42:09

sherlockhomeless 2016/08/02 07:24:52

a-kuma3 2016/08/02 08:43:20

sherlockhomeless 2016/08/03 00:07:27

sherlockhomeless 2016/08/03 06:52:05

a-kuma3 2016/08/03 08:34:32

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

Google Mapの検索結果を自サイトで実現したい

ベストアンサー

a-kuma32016/07/30 10:21:55 満足3000pt

sherlockhomeless 2016/07/30 17:21:20

sherlockhomeless 2016/07/30 17:21:50

a-kuma3 2016/07/30 17:45:19

sherlockhomeless 2016/07/30 22:46:10

a-kuma3 2016/07/31 09:27:29

sherlockhomeless 2016/07/31 17:44:36

a-kuma3 2016/08/01 10:21:14

sherlockhomeless 2016/08/02 06:34:35

a-kuma3 2016/08/02 06:42:09

sherlockhomeless 2016/08/02 07:24:52

a-kuma3 2016/08/02 08:43:20

sherlockhomeless 2016/08/03 00:07:27

sherlockhomeless 2016/08/03 06:52:05

a-kuma3 2016/08/03 08:34:32

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

a-kuma32016/07/30 10:21:55
満足3000pt