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

Question

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)

Comments

[kei344]

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

[oyashiro]

独自で作ったjsです。

[kei344]

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

[oyashiro]

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

Answer 1

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);
}

Comments

[oyashiro]

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