sherlockhomeless回答ポイント 2500pt

Google Mapで特定の住所の周辺検索を自サイトで表示し、検索したスポットの情報をスマートフォンから閲覧したい

前回の質問 http://q.hatena.ne.jp/1469814381 で、自サイトにGoogle Mapの検索結果を表示することはできました。ただその情報をスマホで閲覧した際、パソコンから閲覧した場合はマウスカーソルをスポットのマーク（赤丸枠の中に黒丸が描かれた図）の上に置くと情報が出てきたのですが。
スマートフォンの場合は、タップしても長押ししてもスポットの情報が出てきません。
スマートフォンでもプロットされたスポットの情報を見れるようにするにはどうすればよいでしょうか。
よろしくお願い致します。

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

ログインして回答する

ベストアンサー

a-kuma32016/08/03 12:16:04
満足2500pt

前の質問の回答に、クリック（タップ）したときに吹き出しを表示して、店舗名と住所を表示するようにしました。

<!-- libraries=places を追加、key は割愛 -->
<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);

                        // ★ここから

                        // 吹き出し
                        var iw = new google.maps.InfoWindow({
                            content: title = r.name + "<br>" + r.vicinity,
                            size: new google.maps.Size(50, 30)
                        });

                        // マーカーをクリックしたときに吹き出しを表示する
                        google.maps.event.addListener(marker, 'click', function() {
                            iw.open(map, marker);
                        });

                        // ★ここまでを追加しました

                    });

                    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>

URL のパラメータは、前と同じで、

address：住所（検索文字列）
keyword：キーワード

こんな感じで使うのを想定しています。

http://my.site/map?address=皇居&keyword=ラーメン

もうひとつ、マーカーの横に情報を表示する例。

こちらを参考にしました。
http://www.mwsoft.jp/programming/googlemap/google_map_v3_custom_overlay.html
https://developers.google.com/maps/documentation/javascript/examples/overlay-simple?hl=ja

<!-- libraries=places を追加、key は割愛 -->
<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;  // 仮

    function MarkerLabel(map, latlng, label) {
        this.latlng_ = latlng;
        this.label_ = label;
        this.setMap(map);
    }

    // ★ここから

    // google.maps.OverlayView を継承したクラス
    MarkerLabel.prototype = new google.maps.OverlayView();

    MarkerLabel.prototype.onAdd = function() {
        this.div_ = document.createElement( "div" );
        this.div_.style.position = "absolute";
        this.div_.className = "__marker_label";
        this.div_.innerHTML = this.label_;

        var panes = this.getPanes();
        panes.overlayLayer.appendChild( this.div_ );
    };

    MarkerLabel.prototype.draw = function() {
        // 緯度、経度 → 地図上のドット位置
        var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
        this.div_.style.left = point.x + 'px';
        this.div_.style.top = point.y + 'px';
    };

    MarkerLabel.prototype.onRemove = function() {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    };

    // ★ここまでを追加しました

    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) {
                        console.log(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);

                        // ★ここから

                        var ml = new MarkerLabel(map, latlng, r.name);

                        // ★ここまでを追加しました

                    });

                    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;
}
.__marker_label {
    position: absolute;
    font-size: 14px;
    color: #0000bb;
    /* 文字のふちどり */
    text-shadow:
        -4px -4px 2px #fff,
         4px -4px 2px #fff,
        -4px  4px 2px #fff,
         4px  4px 2px #fff;
}
</style>

<div id="map"></div>

パラメータは、吹き出しを表示する場合と同じです。
文字のふちどりなんかをして多少は見やすくなりましたが、検索結果が多い場合には全て表示するとごちゃごちゃしますね。

スター

5件のコメントを見る
sherlockhomeless 2016/08/03 21:27:35

ありがとうございます、どちらもすごいですね！うまく表示されます！
ただすみません、もう1つだけ、お願いがあるのですが。

スポット情報が見れるようになりまして、実際にスマホで閲覧した際に。
スポットの表示がセンターに来ないのがどうしても気になりまして。
おそらく横幅のサイズを1000px等固定しているのが原因な気もします。

PCで閲覧した場合とスマホで閲覧した場合で、レスポンシブに表示を変えることはできないでしょうか？

Googleマップを横幅100%でレスポンシブに表示する | hacknote
http://hacknote.jp/archives/11200/

を参考にしてみまして、コードを入れたりしてみたのですがうまくいかず…再度お手数お掛け致しますが、ご教授いただけますと幸いです。

スター
a-kuma3 2016/08/03 22:53:10
スポットの表示がセンターに来ないのがどうしても気になりまして。
おそらく横幅のサイズを1000px等固定しているのが原因な気もします。
要因はふたつあって、ひとつはおっしゃる通り、サイズを固定にしていることです。
横幅を画面というか、ウィンドウのサイズに合わせるには、後半のこの部分。
```
#map {
    width: 1000px;
    height: 500px;
}
```
これを、こうします。
```
#map {
    width: 100%;    /* 横幅を自動で調整 */
    height: 500px;
}
```
高さはどうしますか？
- スマホと PC で、同じで良い
- スマホと PC で変える（サイズをふたつ指定することになります）
＃ふたつなの？、ってところはあまり気にしないで　:-)

もうひとつの要因は、検索結果のマーカーが全て表示されるようにズーム倍率を調整していることです（敢えて、やってます）。
例えば、検索結果が 4件あって、きれいに正方形になるような場所だと、どのように表示されるのが良いでしょう。
- どれかひとつを、地図の中央に持ってくる
- 全ての検索結果が均等に入るように、調整する
前の質問での回答もそうですが、敢えて後者を選んでます。

検索結果の一番目が地図の中央になるように表示することもできます。

スター
sherlockhomeless 2016/08/03 23:05:38

a-kuma3さん迅速なご回答ありがとうございます！
「width: 100%;」にするといい感じに表示されました！
全ての検索結果が均等に入る方がよい気がしますので問題ありません。

高さは…そうですねもしPCが600px、スマホで350pxぐらいにするのが可能でしたら、お手すきの時にお教えいただきますとありがたいですm(__)m

スター
a-kuma3 2016/08/03 23:27:09
高さは…そうですねもしPCが600px、スマホで350pxぐらいにするのが可能でしたら、
先のコメントでこう書きましたが、
```
#map {
    width: 100%;    /* 横幅を自動で調整 */
    height: 500px;
}
```
それを、このようにします。
```
#map {
    width: 100%;    /* 横幅を自動で調整 */
    height: 350px;  /* とりあえず、高さを 350px に設定 */
}
/* 横幅が 768px 以上の場合：ざっくり言うとスマホ以外 */
@media (min-width: 768px) {
    #map {
        height: 600px;  /* そのときは、高さを 600px に設定 */
    }
}
```
こういうふうに設定するやり方を、「メディアクエリ」って言います。

iPad みたいなのとか、逆にでっかいモニタとかあるじゃん。
って思いますよね？
もっと気合を入れて対応する場合には、もうちょっと細かく場合分けをしたりします。

スター
sherlockhomeless 2016/08/04 07:54:50

すごいです、勉強になります！うまく表示もされました！
ありがとうございました(*^^)

スター

Google Mapで特定の住所の周辺検索を自サイトで表示し、検索したスポットの情報をスマートフォンから閲覧したい

ベストアンサー

a-kuma32016/08/03 12:16:04
満足2500pt

sherlockhomeless 2016/08/03 21:27:35

a-kuma3 2016/08/03 22:53:10

sherlockhomeless 2016/08/03 23:05:38

a-kuma3 2016/08/03 23:27:09

sherlockhomeless 2016/08/04 07:54:50

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

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

人気の質問

メニュー

PC版

Google Mapで特定の住所の周辺検索を自サイトで表示し、検索したスポットの情報をスマートフォンから閲覧したい

ベストアンサー

a-kuma32016/08/03 12:16:04 満足2500pt

sherlockhomeless 2016/08/03 21:27:35

a-kuma3 2016/08/03 22:53:10

sherlockhomeless 2016/08/03 23:05:38

a-kuma3 2016/08/03 23:27:09

sherlockhomeless 2016/08/04 07:54:50

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

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

人気の質問

メニュー

PC版

a-kuma32016/08/03 12:16:04
満足2500pt