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

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

ただいまの
回答率

88.76%

javascriptでgooglemapの複数マーカー表示について

解決済

回答 1

投稿 編集

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

oyashiro

score 20

jsで下記のようなコードで複数のマーカーをたてているのですが、
地図を移動するとエラーになり、移動した周辺のマーカーがたたない、またそれ以上地図の移動が出来なくなってしまいます。

gmap.jsを使ってます。
https://hpneo.github.io/gmaps/

var shop_lat = 36.398852;
var shop_lng = 140.441548;
var pageId = "";
var ajaxurl = 'http://example.com/wp-admin/admin-ajax.php';

var map;


//地図閉じる
function closeevent() {

    jQuery(function($) {
    $("#map_property").empty();
    });
}


//地図マーカークリック
function markerClick(ids) {

    jQuery(function($) {
    $("#map_property").empty();
    var param = "";
        console.log(ids);
    $.each(ids,function(){
      param += "&id[]=" + this;
    });
    //console.log(param);
        $.ajax({
            type: 'GET',
            url: ajaxurl,
            data: '&action=getMapItem' + param,
        }).done(function(response) {
      //console.log(response);
            $("#map_property").empty();
            $("#map_property").append(response);
        });
    });
}


//地図にマーカーをプロット
var addMarker = function(response) {
    jQuery(function($) {
        var result = $.parseJSON(response);
        if(result == null) return;
        if('properties' in $.parseJSON(response)){
            $.each($.parseJSON(response).properties, function() {
                var lat = this.latitude;
                var lng = this.longitude;
                var detail = this.ids;
                map.addMarker({
                    lat: lat,
                    lng: lng,
                    details: detail,
                    click: function(e) {
                        markerClick(detail);
                    }
                });
            });
        }
    });
}

var get_map_data = function(lat, lng, zoom, param) {

    jQuery(function($) {
        if (pageId == "") {
            $.ajax({
                type: 'GET',
                url: ajaxurl,
                async: false,
                data: '&action=getPageId',
            }).done(function(response) {
                pageId = response.replace(/\s+/g, "");
                //alert("["+pageId+"]");
            });
        }
        $.ajax({
            type: 'GET',
            url: ajaxurl,
            data: '&pageId=' + pageId + "&lat=" + lat + "&lng=" + lng + "&zoom=16&" + param + '&action=show_map',
        }).done(function(response) {
            addMarker(response);
        }).fail(function() {

        }).always(function() {

        });
    });
}

var show_map = function(clear, lat, lng, zoom, param) {
    jQuery(function($) {
        if (clear) {
            pageId = "";
            $("search_map").empty();
            map = GMaps({
                div: '#search_map',
                lat: lat,
                lng: lng,
                dragend: function(e) {
                    var lat = e.getCenter().lat();
                    var lng = e.getCenter().lng();
                    var zoom = e.getZoom();
                    get_map_data(lat, lng, zoom, param);
                }
            });
        }
        get_map_data(lat, lng, zoom, param);
    });
}


jQuery(function($) {
    $(document).ready(function() {
        set_serch_form(window.location.search.substring( 1 ));
        show_map(true, shop_lat, shop_lng, 15, "");
        //検索ボタン
        $("#search_map_button").click(function(){
            //フォームのパラメーター取得
            var param = $("#search-form form").serialize();
            //URLの書き換え
            var href = window.location.href;
            var href = href.replace(/\?.*$/, "");
            var url = href + "?" + param;
            history.pushState(paramArray, null, url);
            show_map(true, shop_lat, shop_lng, 15, param);
        });
    });



    param = window.location.search.substring(1);

                //formの設定

            // var url = param.split('&');
            //
        // for(i=0; url[i]; i++) {
        //   var k = url[i].split('=');
        //   if(k[0] == "propertyKinds[]"){
        //     $("#search-form input[name='propertyKinds[]'][value='" + k[1] + "']").prop("checked",true);
        //   }else if(k[0] == "priceFrom"){
        //     $("#search-form select[name='priceFrom']").val(k[1]);
        //   }else    if(k[0] == "priceTo"){
        //     $("#search-form select[name='priceTo']").val(k[1]);
        //   }else if(k[0]== "buildingAreaM2From"){
        //     $("#search-form select[name='buildingAreaM2From']").val(k[1]);
        //   }else    if(k[0] == "buildingAreaM2To"){
        //     $("#search-form select[name='buildingAreaM2To']").val(k[1]);
        //   }else    if(k[0] == "layouts[]"){
        //     $("#search-form input[name='layouts[]'][value='" + k[1] + "']").prop("checked",true);
        //   }else    if(k[0] == "effectiveAgeSeletion"){
        //     $("#search-form select[name='effectiveAgeSeletion']").val(k[1]);
        //   }else    if(k[0] == "stationWalkTimeSelection"){
        //     $("#search-form select[name='stationWalkTimeSelection']").val(k[1]); -->
        // }else{
        // $("#search-form input[name='" + k[0] + "'][value='" + k[1] + "']").prop("checked",true);
        //   }
        //  }
            //




});

consoleのでエラーは下記です。

Uncaught TypeError: e.getCenter is not a function
    at Sg.dragend (map.js:103)
    at Sg.<anonymous> (gmaps.js:506)
    at Object.trigger (js?key=AIzaSyAoJSG0glm0z87PhY3OA50ktqM-D1k1bSw:119)
    at Xx (map.js:32)
    at Tx (map.js:30)
    at Object.Ub (map.js:29)
    at Eo.Ma (common.js:180)
    at _.wo._.m.Ma (common.js:177)
    at HTMLDocument.Wo.D._.Io.Qa (common.js:89)
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/02/25 22:05

    使用しているプラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)

    キャンセル

  • oyashiro

    2018/02/25 22:18

    独自で作ったjsです。

    キャンセル

  • kei344

    2018/02/25 22:23

    GMapsと言う関数はGoogleMapsAPIには無いと思いますが、それも自作ならそれも提示ください。

    キャンセル

  • oyashiro

    2018/02/25 22:34

    すいませんでした。追記致しました。

    キャンセル

回答 1

checkベストアンサー

0

dragendで渡される e は、多分ただのイベントだと思いますので、変数mapから情報を得てみてはいかがでしょうか。

dragend: function(e) {
    var lat = map.getCenter().lat();
    var lng = map.getCenter().lng();
    var zoom = map.getZoom();
    get_map_data(lat, lng, zoom, param);
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/02/26 15:21

    無事に解決出来ました。ありがとうございます。

    キャンセル

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

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

関連した質問

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