Карты показывают сразу в модальном режиме на ПК, но на мобильном телефоне местоположение отображается на сером фоне, пока немного не сдвинулся - PullRequest
Новая
       15

Карты показывают сразу в модальном режиме на ПК, но на мобильном телефоне местоположение отображается на сером фоне, пока немного не сдвинулся

0 голосов
/ 04 июня 2019

Я показываю карту Google в модальном режиме, используя правильный ключ API и т. Д., Который отлично работает на ноутбуке (Mac с Chrome). Нажмите на файл img, который анализирует элементы данных, чтобы получить фрагмент js здесь. 

$(document).ready(function() {
  var map = null;
  var myMarker;
  var myLatlng;

  function initializeGMap(lat, lng) {
    myLatlng = new google.maps.LatLng(lat, lng);

    var myOptions = {
      zoom: 15,
      zoomControl: true,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    myMarker = new google.maps.Marker({
      position: myLatlng
    });
    myMarker.setMap(map);
    $('#loc').text('Lat: '+lat+', Long: '+lng);


  }

  // Re-init map before show modal
  $('#mapModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    initializeGMap(button.data('lat'), button.data('lng'));
    $("#location-map").css("width", "100%");
    $("#map_canvas").css("width", "100%");
  });

  // Trigger map resize event after modal shown
  $('#mapModal').on('shown.bs.modal', function() {
    google.maps.event.trigger(map, "resize");
    map.setCenter(myLatlng);
  });
});

Это работает очень хорошо ... с широтой и долготой, отправленными обратно на страницу как 'loc', отображаемое в моем заголовке с тем же идентификатором.

ОДНАКО на мобильном устройстве, когда я нажимаю на img, модал всплывает lat и long показывает правильно, и я получаю маленький красный маркер в середине экрана на сером / бежевом фоне .... Если я затем перетащу фон немного вверх, появится карта. Кто-нибудь сталкивался с этим раньше? Я думал, что 'изменить размер' на показанном разобрали это ??

Вот модал, где находится холст карты. 

       <div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Service Location</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="modal-body">
                <div class="col-md-12 modal_body_content">
                <h6 id="loc"></h6>
                </div>
                <div class="row">
                  <div class="col-md-12 modal_body_map">
                    <div class="location-map" id="location-map" >
                      <div style="width: 600px; height: 400px;" id="map_canvas"></div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 modal_body_end">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
...