Карта Google не увеличивает границы отфильтрованных / новых маркеров с помощью jquery-ui-map

Я использую этот плагин jQuery для моей карты Google.

У меня есть небольшая форма, которую я использую для фильтрации своих маркеров на карте.

Маркеры создаются с использованием $('#map_canvas').gmap('addMarker', {...}) функция плагина, и одно из свойств, которые я могу передать при создании маркера с этой функцией, 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);
                                });                     
                            });

                        }); 
                    });

1 ответ

Решение
$('#map_canvas').gmap('set', 'bounds', null);

Оказывается, вы должны сбросить границы. Перед нанесением / созданием маркеров.

http://code.google.com/p/jquery-ui-map/issues/detail?id=42

Другие вопросы по тегам