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

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

ただいまの
回答率

88.91%

GoogleMapAPIでピンを表示範囲のみ表示

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,725

ssk

score 288

前の質問でデータベースから絞り込んで、マップにピンを表示するところまではできました。
ただ、ループが拾えていないようです。どこが間違っているのでしょうか?

コード

参考サイト

///////////////////////////////////////////////////////////////////////
// 変数設定
///////////////////////////////////////////////////////////////////////
var Yucho = {
    map:{},
    markerArr:[],
    rectangleArrLatLng:[],
    rectangleArrObj:[],
    rectangleArrData:[],
    gridRow:10,
    gridCol:10,
    defLat:35.685842,
    defLng:139.757850,
    defZoom:10,
    bounds:{},
    jsonUrl:'ajaxtestmaps/testsearch.json',
    jsonData:[],
    boundsData:{},
};

///////////////////////////////////////////////////////////////////////
// 初期化
///////////////////////////////////////////////////////////////////////
Yucho.initMap = function(){

    // googleMaps 初期設定
    Yucho.gMapInit();

    // googleMaps アイドル設定
    Yucho.gMapSetIdle();

};

///////////////////////////////////////////////////////////////////////
// googleMaps 初期設定
///////////////////////////////////////////////////////////////////////
Yucho.gMapInit = function(){
    Yucho.map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: Yucho.defLat, 
            lng: Yucho.defLng
        },
        zoom: Yucho.defZoom
    });
};

///////////////////////////////////////////////////////////////////////
// JSON読み込み
///////////////////////////////////////////////////////////////////////
Yucho.getJson = function(){

    $.ajax({
        type: "GET",
        url: '/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng,
        dataType: "json",
    }).done(function(jsonDataList){
        Yucho.jsonData = jsonDataList;
        $('#status_all').html(Yucho.jsonData.jsonDataList.length);
    });

    // マーカー削除
    Yucho.markerArr.forEach(function(marker, idx) {
        marker.setMap(null);
    });

    // マーカー作成
    Yucho.createMarker();

};

///////////////////////////////////////////////////////////////////////
// googleMaps アイドル設定
///////////////////////////////////////////////////////////////////////

Yucho.gMapSetIdle = function(){
    google.maps.event.addListener(Yucho.map, 'idle', function(){
        Yucho.refleshMap();
    });
};

///////////////////////////////////////////////////////////////////////
// MAPリフレッシュ
//アイドルされた時、Jsonを再読み込み
///////////////////////////////////////////////////////////////////////
Yucho.refleshMap = function() {

    // マップサイズ取得
    Yucho.getMapSize();

    // json読み込み
    Yucho.getJson();

};

///////////////////////////////////////////////////////////////////////
// マップサイズ取得
//getSouthWest():表示領域の南西(左下)の頂点の地理座標を返す
//getNorthEast():領域の北東(右上)の頂点の地理座標を返す
///////////////////////////////////////////////////////////////////////
Yucho.getMapSize = function() {
    Yucho.bounds = Yucho.map.getBounds();
    Yucho.neLatLng = Yucho.bounds.getNorthEast();
    Yucho.neLat = Yucho.neLatLng.lat();
    Yucho.neLng = Yucho.neLatLng.lng();
    Yucho.swLatLng = Yucho.bounds.getSouthWest();
    Yucho.swLat = Yucho.swLatLng.lat();
    Yucho.swLng = Yucho.swLatLng.lng();
};

///////////////////////////////////////////////////////////////////////
// マーカー作成
///////////////////////////////////////////////////////////////////////
Yucho.createMarker = function() {
    var infoWindow;
    if(Array.isArray(Yucho.jsonData.jsonDataList)){
        console.log(Yucho.jsonData.jsonDataList.length);
        Yucho.jsonData.jsonDataList.forEach(function (place) {
                    var latlng = new google.maps.LatLng(place.lat,place.lng);
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: Yucho.map,
                        flat: true,
                    });
                    Yucho.markerArr.push(marker);
            google.maps.event.addListener(marker, 'click', function () {//情報ウィンドウ
                        if (!infoWindow) {
                            infoWindow  = new google.maps.InfoWindow();
                        }
                        infoWindow.setContent('会社名' + '<br />' + '住所' + '<br />' + '緯度:' + place.lat + '<br />' + '軽度:' + place.lng);
                        infoWindow.open(map, marker);
                    });
        });
    }
};

///////////////////////////////////////////////////////////////////////
// event
// window.onload HTML読み込みが完了してからから実行される
///////////////////////////////////////////////////////////////////////

window.onload = Yucho.initMap;
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

Yucho.gMapInit()の直後に地図範囲を取得しようとしてますから、地図の読み込みが終わっていないのではないでしょうか。idleイベントを待ってからJSONを取得するといいと思います。

 コメントを受けて追記
///////////////////////////////////////////////////////////////////////
// MAPリフレッシュ
//アイドルされた時、Jsonを再読み込み
///////////////////////////////////////////////////////////////////////
Yucho.refleshMap = function() {

    // マップサイズ取得
    Yucho.getMapSize();

    // json読み込み
    Yucho.getJson();


};
///////////////////////////////////////////////////////////////////////
// JSON読み込み
///////////////////////////////////////////////////////////////////////
Yucho.getJson = function(){
    $.ajax({
        type: "GET",
        url: '/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng,
        dataType: "json",
    }).done(function(jsonDataList){
        Yucho.jsonData = jsonDataList;
        $('#status_all').html(Yucho.jsonData.jsonDataList.length);

        // マーカー削除
        Yucho.markerArr.forEach(function(marker, idx) {
            marker.setMap(null);
        });

        // マーカー作成
        Yucho.createMarker();

        //console.log('/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng);
    });

};

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/18 19:21 編集

    申し訳ございません。
    javascriptの習得レベルが低いので、以下の実装方法がわかりませんでした。。

    「.createMarker()を.getJson()のコールバックから呼ぶ」
    を具体的に教えていただけますか?><

    キャンセル

  • 2017/03/18 19:40 編集

    参考コード非常に助かります><
    質問内容のコードを変更しました。

    しかし、.「getJson()内と、.createMarker()内とで数が合わない」は解決できませんでした。
    私の書き方が悪いと思います。。

    もう一度、助言いただけないでしょうか?
    よろしくお願いいたします。

    キャンセル

  • 2017/03/18 19:49

    Lhankor_Mhy様

    本当にありがとうございます。
    Yucho.getJsonの内容をLhankor_Mhy様の通り行ったところ、実装することができました。

    1日悩んでいたので、助かりました、、
    ありがとうございます。

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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