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

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

ただいまの
回答率

90.50%

  • JavaScript

    20454questions

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

  • JSP

    1035questions

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

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

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 697

ShimoK

score 7

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

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

var geocoder;
var map;
function initialize() {
//ジオコーダー(住所→経度緯度)を行うオブジェクトのインスタンス化
    geocoder = new google.maps.Geocoder();
//中心座標の経度・緯度の指定(岩手県立大学の座標)
    var latlng = new google.maps.LatLng(39.8012332, 141.1376046);
// optでは主に下記3つを指定し,Mapクラスのインスタンス作成の2番目の引数に指定する
    var opts = {
        zoom: 10, //倍率の指定(小さいほど広域)
        center: latlng, //中心座標
        mapTypeId: google.maps.MapTypeId.ROADMAP // 市街地図(ROADMAP)
    };
//地図オブジェクトの(Mapクラスのインスタンス)作成 
    map = new google.maps.Map(document.getElementById("map_canvas"), opts);
//下記にある経度緯度変換関数の実行
    codeAddress();
}

function codeAddress() {
//<td>タグの要素「address0」のHTMLを取得
    var address = document.getElementById("address0").innerHTML;
// geocodeリクエストを実行。第1引数はGeocoderRequest。
// 住所をaddressプロパティに入れる。第2引数はコールバック関数。
    if (geocoder) {
        geocoder.geocode({'address': address, 'region': 'jp'},
                function (results, status) {
//コールバック関数で正常に値を取得している場合
                    if (status == google.maps.GeocoderStatus.OK) {
//取得した経度緯度の一番目の場所を地図の中心のセット
                        map.setCenter(results[0].geometry.location);
//表示範囲の設定オブジェクト
                        var bounds = new google.maps.LatLngBounds();
//複数検索された場合に対応
                        for (var r in results) {
                            if (results[r].geometry) {
                                var latlng = results[r].geometry.location;
//検索結果がすべて表示されるように表示を設定
                                bounds.extend(latlng);
//マーカーの設置
                                new google.maps.Marker({
                                    position: latlng, map: map
                                });
//HTMLへ緯度と経度を書き込み
                                document.getElementById('id_ido').innerHTML = latlng.lat();
                                document.getElementById('id_keido').innerHTML = latlng.lng();
                            }
                        }
//表示範囲を調整
                        map.fitBounds(bounds);
                    } else {
                        alert("Geocode 取得に失敗しました: " + status);
                    }
                });
    }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • 退会済みユーザー

    2018/01/15 20:40

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

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

同じタグがついた質問を見る

  • JavaScript

    20454questions

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

  • JSP

    1035questions

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