id:sherlockhomeless
ポイントあり2500ptベストアンサーあり
インターネットウェブ制作

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


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

回答の条件
  • 1人10回まで
  • 登録：
  • 終了：2016/08/04 07:55:17
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154

ポイント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>

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

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

高さは…そうですねもしPCが600px、スマホで350pxぐらいにするのが可能でしたら、

先のコメントでこう書きましたが、

#map {
    width: 100%;    /* 横幅を自動で調整 */
    height: 500px;
}

それを、このようにします。

#map {
    width: 100%;    /* 横幅を自動で調整 */
    height: 350px;  /* とりあえず、高さを 350px に設定 */
}
/* 横幅が 768px 以上の場合：ざっくり言うとスマホ以外 */
@media (min-width: 768px) {
    #map {
        height: 600px;  /* そのときは、高さを 600px に設定 */
    }
}

こういうふうに設定するやり方を、「メディアクエリ」って言います。

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

2016/08/03 23:27:09
id:sherlockhomeless

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

2016/08/04 07:54:50

コメント（0件)

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

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

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ