Как показать маршруты Google Maps на вкладках или в div с display:none

Когда я загружаю карту Google (v3) с маршрутами в div, который скрыт от пользователя, результирующая карта не масштабируется и не центрируется правильно. Я попытался запустить событие resize, но это лишь частично решило проблему.

Обычно при загрузке карты с маршрутами API автоматически находит оптимальный вид (т. е. уровень масштабирования и центр), чтобы показать всю поездку. Любые идеи, что я делаю неправильно?

См. JsFiddle.

<button id="show">Show</button>
<div id="a">
   <div id="map_wrapper" style="display:none">
      <div id="map_canvas" style="height: 354px; width:713px;"></div>
   </div>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
  <script>
  var directionsService,
      directionsDisplay,
      map;

    function initialize() {

      directionsService = new google.maps.DirectionsService();
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }
      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      directionsDisplay.setMap(map);

      var start = 'New York, NY';
      var end = 'Chicago, IL';
      var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        }
      });
    }
  </script>
</div>

И джаваскрипт:

$(document).ready(function(e) {
    $('#show').on('click', function() {
        $('#map_wrapper').show();
        google.maps.event.trigger(map, "resize");
    });
});

google-maps google-maps-api-3 tabs map-directions
person greener    schedule 10.01.2013    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Измените готовую функцию следующим образом:

$(document).ready(function(e) {
        $('#show').on('click', function() {
            $('#map_wrapper').show();
            google.maps.event.addListenerOnce(map, "resize",function(){
              try{this.fitBounds(directionsDisplay.getDirections().routes[0].bounds)
              }catch(e){}
            });
            google.maps.event.trigger(map, "resize");
        });
      });

Когда внутри карты доступен маршрут, он устанавливает границы карты в соответствии с границами маршрута.

Демонстрация: http://jsfiddle.net/doktormolle/c2pC3/

person Dr.Molle    schedule 11.01.2013

arrow_upward
0
arrow_downward

Вы можете инициализировать карту после нажатия кнопки: убрать обратный вызов, вызвать initialize() при нажатии кнопки. http://jsfiddle.net/mB6AZ/2/

person antejan    schedule 10.01.2013
comment
Спасибо. Я пробовал это, но в моем случае весь HTML загружается с помощью AJAX, поэтому мне нужно сохранить обратный вызов. Этот вопрос на самом деле является побочным продуктом stackoverflow.com/questions/14229695/ - person greener; 10.01.2013
comment
Может быть, вы можете скрыть этот блок от пользователя, не устанавливая display:none, например, jsfiddle.net/boko/mB6AZ/ 5 - person antejan; 10.01.2013

arrow_upward
0
arrow_downward

Сохраните копию DirectionsRoute LatLngBounds, а затем подгоните карту к этим границам после изменения ее размера.

Рабочая демонстрация

var bounds;

directionsService.route(request, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      bounds = response.routes[0].bounds;
    }
});

$(document).ready(function (e) {
  $('#show').on('click', function () {
    $('#map_wrapper').show(0, function () {
      // this will fire once the map resize completes
      google.maps.event.addListenerOnce(map, 'idle', function () {
        this.fitBounds(bounds);
      });
      google.maps.event.trigger(map, "resize");
    });
  });
});
person Seain Malkin    schedule 10.01.2013