人力検索はてな
ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら
i-mobile
Google Mapで特定の住所の周辺検索を自ｻｲﾄで表示し､検索したｽﾎﾟｯﾄの情報をｽﾏｰﾄﾌｫﾝから閲覧したい

前回の質問 http://q.hatena.ne.jp/1469814381 で､自ｻｲﾄにGoogle Mapの検索結果を表示することはできました｡ただその情報をｽﾏﾎで閲覧した際､ﾊﾟｿｺﾝから閲覧した場合はﾏｳｽｶｰｿﾙをｽﾎﾟｯﾄのﾏｰｸ(赤丸枠の中に黒丸が描かれた図)の上に置くと情報が出てきたのですが｡
ｽﾏｰﾄﾌｫﾝの場合は､ﾀｯﾌﾟしても長押ししてもｽﾎﾟｯﾄの情報が出てきません｡
ｽﾏｰﾄﾌｫﾝでもﾌﾟﾛｯﾄされたｽﾎﾟｯﾄの情報を見れるようにするにはどうすればよいでしょうか｡
よろしくお願い致します｡
●質問者: sherlockhomeless
●ｶﾃｺﾞﾘ:ｲﾝﾀｰﾈｯﾄ ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 1/1件
▽最新の回答へ
▽1 ● a-kuma3
●2500ﾎﾟｲﾝﾄ ﾍﾞｽﾄｱﾝｻｰ

前の質問の回答に､ｸﾘｯｸ(ﾀｯﾌﾟ)したときに吹き出しを表示して､店舗名と住所を表示するようにしました｡

<!-- 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 のﾊﾟﾗﾒｰﾀは､前と同じで､

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

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>

ﾊﾟﾗﾒｰﾀは､吹き出しを表示する場合と同じです｡
文字のふちどりなんかをして多少は見やすくなりましたが､検索結果が多い場合には全て表示するとごちゃごちゃしますね｡

sherlockhomelessさんのｺﾒﾝﾄ
ありがとうございます､どちらもすごいですね！うまく表示されます！ ただすみません､もう1つだけ､お願いがあるのですが｡ ｽﾎﾟｯﾄ情報が見れるようになりまして､実際にｽﾏﾎで閲覧した際に｡ ｽﾎﾟｯﾄの表示がｾﾝﾀｰに来ないのがどうしても気になりまして｡ おそらく横幅のｻｲｽﾞを1000px等固定しているのが原因な気もします｡ PCで閲覧した場合とｽﾏﾎで閲覧した場合で､ﾚｽﾎﾟﾝｼﾌﾞに表示を変えることはできないでしょうか？ Googleﾏｯﾌﾟを横幅100%でﾚｽﾎﾟﾝｼﾌﾞに表示する | hacknote http://hacknote.jp/archives/11200/ を参考にしてみまして､ｺｰﾄﾞを入れたりしてみたのですがうまくいかず…再度お手数お掛け致しますが､ご教授いただけますと幸いです｡
a-kuma3さんのｺﾒﾝﾄ
>> ｽﾎﾟｯﾄの表示がｾﾝﾀｰに来ないのがどうしても気になりまして｡ おそらく横幅のｻｲｽﾞを1000px等固定しているのが原因な気もします｡ << 要因はふたつあって､ひとつはおっしゃる通り､ｻｲｽﾞを固定にしていることです｡ 横幅を画面というか､ｳｨﾝﾄﾞｳのｻｲｽﾞに合わせるには､後半のこの部分｡ >|css| #map { width: 1000px; height: 500px; } ||< これを､こうします｡ >|css| #map { width: 100%; /* 横幅を自動で調整 */ height: 500px; } ||< 高さはどうしますか？ - ｽﾏﾎと PC で､同じで良い - ｽﾏﾎと PC で変える(ｻｲｽﾞをふたつ指定することになります) ＃ ふたつなの？､ってところはあまり気にしないで <tt>:-)</tt> もうひとつの要因は､検索結果のﾏｰｶｰが全て表示されるようにｽﾞｰﾑ倍率を調整していることです(敢えて､やってます)｡ 例えば､検索結果が 4件あって､きれいに正方形になるような場所だと､どのように表示されるのが良いでしょう｡ - どれかひとつを､地図の中央に持ってくる - 全ての検索結果が均等に入るように､調整する 前の質問での回答もそうですが､敢えて後者を選んでます｡ 検索結果の一番目が地図の中央になるように表示することもできます｡
sherlockhomelessさんのｺﾒﾝﾄ
a-kuma3さん迅速なご回答ありがとうございます！ ｢width: 100%;｣にするといい感じに表示されました！ 全ての検索結果が均等に入る方がよい気がしますので問題ありません｡ 高さは…そうですねもしPCが600px､ｽﾏﾎで350pxぐらいにするのが可能でしたら､お手すきの時にお教えいただきますとありがたいですm(__)m
a-kuma3さんのｺﾒﾝﾄ
>> 高さは…そうですねもしPCが600px､ｽﾏﾎで350pxぐらいにするのが可能でしたら､ << 先のｺﾒﾝﾄでこう書きましたが､ >|css| #map { width: 100%; /* 横幅を自動で調整 */ height: 500px; } ||< それを､このようにします｡ >|css| #map { width: 100%; /* 横幅を自動で調整 */ height: 350px; /* とりあえず､高さを 350px に設定 */ } /* 横幅が 768px 以上の場合：ざっくり言うとｽﾏﾎ以外 */ @media (min-width: 768px) { #map { height: 600px; /* そのときは､高さを 600px に設定 */ } } ||< こういうふうに設定するやり方を､｢ﾒﾃﾞｨｱｸｴﾘ｣って言います｡ iPad みたいなのとか､逆にでっかいﾓﾆﾀとかあるじゃん｡ って思いますよね？ もっと気合を入れて対応する場合には､もうちょっと細かく場合分けをしたりします｡
sherlockhomelessさんのｺﾒﾝﾄ
すごいです､勉強になります！うまく表示もされました！ ありがとうございました(*^^)
関連質問
●質問をもっと探す●

0.人力検索はてなﾄｯﾌﾟ
8.このﾍﾟｰｼﾞを友達に紹介
9.このﾍﾟｰｼﾞの先頭へ
□対応機種一覧
□お問い合わせ
□ﾍﾙﾌﾟ/お知らせ
□ﾛｸﾞｲﾝ
□無料ﾕｰｻﾞｰ登録
□はてなﾄｯﾌﾟ