Mostrando um mapa do Google em um modal criado com o Twitter Bootstrap

Estou tentando inserir um mapa do Google em um modal usando o Twitter Bootstrap. O modal aparece com a forma do mapa presente, mas apenas parte do mapa é exibida, o resto é cinza. Ao resize a canvas, o mapa sempre aparece corretamente, embora esteja centrado no lugar errado.

Pesquisei e encontrei sugestões, como chamar o evento de redimensionamento do mapa ou definir a largura máxima da imagem do mapa como nenhuma, mas nenhuma dessas sugestões ajudou até o momento. Parece que o mapa não está conseguindo descobrir o tamanho correto, desde que esteja em um elemento oculto.

JS

function initialize() { var mapOptions = { center: new google.maps.LatLng(51.219987, 4.396237), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(51.219987, 4.396237) }); marker.setMap(map); } 

HTML

  

Estou usando o Twitter Bootstrap v2.0.4. Eu preciso de alguma ajuda porque não estou conseguindo acionar corretamente o evento de redimensionamento ou editar o css para que o mapa do Google seja deixado em paz.

O Google Maps, de fato, exibe a área “cinza” quando ela é colocada dentro de um elemento dynamic (por exemplo: um que redimensiona, desvanece, etc.). Você está certo sobre o gatilho da function “resize”, que deve ser chamada assim que a animação estiver completa (o evento shown.bs.modal no Bootstrap 3 ou o evento shown no Bootstrap 2):

 $("#myModal").on("shown.bs.modal", function () { google.maps.event.trigger(map, "resize"); }); 

No Bootstrap 2, você fará:

 $('#myModal').on('shown', function () { google.maps.event.trigger(map, "resize"); }); 

(onde map é o nome da variável do seu mapa (consulte a documentação do Google Maps para obter mais detalhes) e #myModal o ID do seu elemento).

ATUALIZAÇÃO 2018-05-22

Com um novo release de renderizador na versão 3.32 da API JavaScript do Google Maps, o evento de redimensionamento não faz mais parte da class Map .

A documentação afirma

Quando o mapa é redimensionado, o centro do mapa é fixo

  • O controle de canvas inteira agora preserva o centro.

  • Não há mais necessidade de acionar o evento de redimensionamento manualmente.

fonte: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); não tem nenhum efeito a partir da versão 3.32

Para mim, funciona assim (Boostrap 3):

 $("#contact-modal").on("shown.bs.modal", function () { google.maps.event.trigger(map, "resize"); }); 

Mostrando o mapa corretamente e centralizado

Eu queria apontar algumas modificações que fiz, com base na resposta original, para fazê-lo funcionar com o Bootstrap 3 (verifique o uso de modals ).

 // Resize map to show on a Bootstrap's modal $('#map-modal').on('shown.bs.modal', function() { var currentCenter = map.getCenter(); // Get current center before resizing google.maps.event.trigger(map, "resize"); map.setCenter(currentCenter); // Re-set previous center }); 

Neste caso, também cuido de recentrar o mapa, com base nesta questão sugerida no comentário de Jan-Henk à primeira resposta.

Ao usar o Bootstrap 3, você precisa usar o que é fornecido em sua documentação, ou seja, em vez de ‘mostrado’, use ‘shown.bs.modal’

Exemplo:

  $('#modal').on('shown.bs.modal', function () { initialiseMap(); }); 

A resposta aceita funciona, de fato, neste caso, onde o conteúdo do div é local. Infelizmente, tive o mesmo problema ao mostrar um mapa incluído como parte de dados remotos. Pegar a alça do mapa e chamar o redimensionamento não centralizou meu mapa corretamente. Aqui está como eu corrigi o problema na minha situação de dados remotos.

Inclua uma tag de script como parte de seus dados remotos com uma function para inicializar o mapa

  

Chame a function no evento mostrado da checkbox de diálogo na página principal

  

Desta forma, o mapa já está dimensionado na checkbox de diálogo antes de você inicializá-lo. Espero que isso ajude os outros com uma situação semelhante.

A resposta aceita se livrou das checkboxs cinzas, mas não centraliza o mapa nas coordenadas corretas para mim. Minha solução era apenas esperar para renderizar o mapa até que o modal terminasse de exibir.

 $('#modal').on('shown', function () { initialize(); }); 

o código a seguir funciona perfeitamente bem para o bootstrap 3

 $("#mapModal").on("shown.bs.modal", function () {initialize();}); 
  this works for me ****  **Button**  **javascript**  

espero que isso ajude

Eu fixei com solução:

 $('#myId').on('shown.bs.modal', function () { initializeMap() // with initializeMap function get map. }); 

// o evento shown.bs.modal no bootstrap modal será exibido após a apresentação modal, não use show.bs.modal porque ele será chamado antes do show modal.

tente isso!

  

 var map = marker = new Array(); geocoder = NULL; function addPoint(location, id, mapId) { if (!marker[id]) { marker[id] = new google.maps.Marker({ position: location, map: map[mapId], draggable: true }); } } function placeMarker(location, editStr, id) { if (!marker[id]) { marker[id] = new google.maps.Marker({ position: location, map: map[id], draggable: false }); } marker[id].setPosition(location); map[id].setCenter(location); $("#longitud").val(location.lat()); $("#latitud").val(location.lng()); } function initializeMap(id, div_id, lat, lng, editStr) { if (!geocoder) geocoder = new google.maps.Geocoder(); if (!map[id]) { var coordinates = new google.maps.LatLng(lat, lng); var myOptions = {zoom: 8, center: coordinates, mapTypeId: google.maps.MapTypeId.ROADMAP} map[id] = new google.maps.Map(document.getElementById(div_id), myOptions); google.maps.event.addListener(map[id], 'click', function(event) { placeMarker(event.latLng, editStr, id); }); placeMarker(coordinates, editStr, id); } } $('#map_modal').on('shown.bs.modal', function(e) { initializeMap("#newMaps", "map_canvas", 10.444598, -66.9287, ""); }) 

Eu também estou enfrentando o mesmo problema, mas eu o resolvo esperando pelo estado ‘ocioso’ do mapa (isto é, quando terminar) e, em seguida, chamando o redimensionamento:

  google.maps.event.addListenerOnce(map, 'idle', function () { var currentCenter = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(currentCenter); map.setZoom(15); }); 

depois de

  map = new google.maps.Map(document.getElementById('map-canvas2'),mapOptions);