質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

2459閲覧

Google Mapsに部分一致した住所全てに複数のピンを表示させたい

ShimoK

総合スコア13

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/01/15 10:51

学校の課題でGoogle Mapsとのマッシュアップの課題を行っていてあいまい検索をしたときに部分一致した文字列の住所を表示させることができました。ただ、一番上の住所のところにしかピンが表示されなくてできれば部分一致した住所全てに表示させたいです。

Google Mapで検索してマップ上に複数ピンを表示させることは可能でしょうか?可能ならばどこのコードを変更すればいいのか教えてください!

js

1var geocoder; 2var map; 3function initialize() { 4//ジオコーダー(住所→経度緯度)を行うオブジェクトのインスタンス化 5 geocoder = new google.maps.Geocoder(); 6//中心座標の経度・緯度の指定(岩手県立大学の座標) 7 var latlng = new google.maps.LatLng(39.8012332, 141.1376046); 8// optでは主に下記3つを指定し,Mapクラスのインスタンス作成の2番目の引数に指定する 9 var opts = { 10 zoom: 10, //倍率の指定(小さいほど広域) 11 center: latlng, //中心座標 12 mapTypeId: google.maps.MapTypeId.ROADMAP // 市街地図(ROADMAP) 13 }; 14//地図オブジェクトの(Mapクラスのインスタンス)作成 15 map = new google.maps.Map(document.getElementById("map_canvas"), opts); 16//下記にある経度緯度変換関数の実行 17 codeAddress(); 18} 19 20function codeAddress() { 21//<td>タグの要素「address0」のHTMLを取得 22 var address = document.getElementById("address0").innerHTML; 23// geocodeリクエストを実行。第1引数はGeocoderRequest。 24// 住所をaddressプロパティに入れる。第2引数はコールバック関数。 25 if (geocoder) { 26 geocoder.geocode({'address': address, 'region': 'jp'}, 27 function (results, status) { 28//コールバック関数で正常に値を取得している場合 29 if (status == google.maps.GeocoderStatus.OK) { 30//取得した経度緯度の一番目の場所を地図の中心のセット 31 map.setCenter(results[0].geometry.location); 32//表示範囲の設定オブジェクト 33 var bounds = new google.maps.LatLngBounds(); 34//複数検索された場合に対応 35 for (var r in results) { 36 if (results[r].geometry) { 37 var latlng = results[r].geometry.location; 38//検索結果がすべて表示されるように表示を設定 39 bounds.extend(latlng); 40//マーカーの設置 41 new google.maps.Marker({ 42 position: latlng, map: map 43 }); 44//HTMLへ緯度と経度を書き込み 45 document.getElementById('id_ido').innerHTML = latlng.lat(); 46 document.getElementById('id_keido').innerHTML = latlng.lng(); 47 } 48 } 49//表示範囲を調整 50 map.fitBounds(bounds); 51 } else { 52 alert("Geocode 取得に失敗しました: " + status); 53 } 54 }); 55 } 56}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問