このjQueryプラグインをGoogleマップに使用しています。
マップ上のマーカーをフィルタリングするために使用する小さなフォームがあります。
マーカーは$('#map_canvas').gmap('addMarker', {...})プラグインの関数を使用して作成され、その関数でマーカーを作成するときに渡すことができるプロパティの1つはですbounds:true。これは、すべてのマーカーが作成および表示されたときに、マップがマップ上のすべてのマーカーの境界にズームインする必要があることを意味します。
問題は-何らかの理由でフィルターをかけると（ [送信]ボタンを押す）、マップが新しいマーカーの境界にズームインしません。それはただそれがあった場所にとどまります。
何故ですか？新しいマーカーの境界にズームインするにはどうすればよいですか？
jQuery：
// when map is initialized, plot all the markers
$('#map_canvas').gmap(mapOptions).bind('init', function(){
$.getJSON('myscript.php', function(json){
var theMarkers = json;
$.each(theMarkers, function(i, val) {
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(val.Lat, val.Lng), 'bounds':true, 'icon':'myicon.png' } ).click(function(){
$('#map_canvas').gmap('openInfoWindow', { 'content': '<h1>'+val.Name+'</h1>'+'<h2 style="color: grey">'+val.Address+'</h2><p style="color: green">'+val.Telephone+'</p>' }, this);
});
});
});
});
// upon clicking submit button - clear old markers and plot newly filtered ones on the map
$('#myform').on('submit', function(e) {
$('#map_canvas').gmap('clear', 'markers');
e.preventDefault();
var myData = $('#myform').serializeArray();
$.getJSON('myscript.php', myData, function(json){
var theMarkers = json;
$.each(theMarkers, function(i, val) {
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(val.Lat, val.Lng), 'bounds':true, 'icon':'myicon.png' } ).click(function(){
$('#map_canvas').gmap('openInfoWindow', { 'content': '<h1>'+val.Name+'</h1>'+'<h2 style="color: grey">'+val.Address+'</h2><p style="color: green">'+val.Telephone+'</p>' }, this);
});
});
});
});