google maps - into - Mostrando un mapa de Google en un modal creado con Twitter Bootstrap

map into modal

Question

Estoy tratando de insertar un mapa de Google en un modal usando Twitter Bootstrap. El modal aparece con la forma del mapa presente, pero solo se muestra una parte del mapa, el resto es gris. Al cambiar el tamaño de la pantalla, el mapa siempre se muestra correctamente, aunque centrado en el lugar equivocado.

He buscado y encontrado sugerencias como llamar el evento de cambio de tamaño del mapa o establecer el ancho máximo de la imagen del mapa en ninguno, pero ninguna de estas sugerencias me ha ayudado hasta ahora. Parece que el mapa no puede determinar su tamaño correcto, siempre que se encuentre en un 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

<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3></h3>
</div>
<div class="modal-body">
<div id="mapCanvas" style="width: 500px; height: 400px"></div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>

Estoy usando Twitter Bootstrap v2.0.4. Necesito ayuda porque no puedo desencadenar el evento de redimensionamiento correctamente o edito el css para que el mapa de Google quede solo.

Answer 1

Mostrando el mapa correctamente y centrado

Quería señalar algunas modificaciones que hice, basadas en la respuesta original, para que funcione con Bootstrap 3 (verifique el getbootstrap.com/javascript/#modals-usage ).

// 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
});

En este caso, también me ocupo de volver a centrar el mapa, en base a esta pregunta sugerida en el comentario de Jan-Henk a la primera respuesta.

Answer 2

Al utilizar Bootstrap 3, debe utilizar lo que se proporciona en su documentación, es decir, en lugar de ''mostrar'' utilizar ''shown.bs.modal''

Ejemplo:

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

Answer 3

De hecho, Google Maps muestra el área "gris" cuando se coloca dentro de un elemento dinámico (por ejemplo: uno que cambia de tamaño, se desvanece, etc.). Tiene razón al activar la función de "cambio de tamaño", que se debe shown.bs.modal una vez que se completa la animación (el evento shown.bs.modal en Bootstrap 3 o el event shown en Bootstrap 2):

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

En Bootstrap 2, harás:

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

(donde el map es el nombre de la variable de su mapa (consulte la documentación de Google Maps para obtener más información) y #myModal la ID de su elemento).

ACTUALIZACIÓN 2018-05-22

Con un nuevo lanzamiento de renderizador en la versión 3.32 de Maps JavaScript API, el evento resize ya no forma parte de la clase Map .

La documentación indica

Cuando se cambia el tamaño del mapa, el centro del mapa se repara

• El control de pantalla completa ahora conserva el centro.

• Ya no es necesario activar el evento de cambio de tamaño manualmente.

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

google.maps.event.trigger(map, "resize"); no tiene ningún efecto a partir de la versión 3.32

Answer 4

La respuesta aceptada eliminó las casillas grises, pero no centró el mapa en las coordenadas correctas para mí. Mi solución fue solo esperar a renderizar el mapa hasta después de que el modal termine de mostrarse.

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

Answer 5

La respuesta aceptada, de hecho, funciona en este caso donde los contenidos del div son locales. Desafortunadamente, tuve el mismo problema al mostrar un mapa que se incluyó como parte de datos remotos. Obtener el control del mapa y el tamaño de las llamadas no centró correctamente mi mapa. Así es como solucioné el problema en mi situación de datos remotos.

Incluye una etiqueta de script como parte de tus datos remotos con una función para inicializar el mapa

<script type="text/javascript">
function renderMap() {
var point = new google.maps.LatLng(51.219987, 4.396237);
var map = new google.maps.Map(document.getElementById(''map''), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13,
center: point
});
var marker = new google.maps.Marker({ position: point, map: map, icon: ''http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png'' });
}
</script>

Llame a la función en el evento mostrado del cuadro de diálogo en la página principal

<script type="text/javascript">
$(document).ready(function () {
$(''#dlgReportInfo'').on(''shown'', function () {
renderMap();
});
})
</script>

De esta forma, el mapa ya está dimensionado en el cuadro de diálogo antes de inicializarlo. Esperemos que esto ayude a otros con una situación similar.

Answer 6

Lo he solucionado con la solución:

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

// evento shown.bs.modal en arranque modal se mostrará después del show modal, no use show.bs.modal porque llamará antes del show modal.

Answer 7

Para mí, funciona así (Boostrap 3):

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

Answer 8

También estoy enfrentando el mismo problema, pero lo resuelvo esperando el estado "inactivo" del mapa (es decir, cuando está terminado) y luego llamo al cambio de tamaño:

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

después

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

Answer 9

el siguiente código funciona perfectamente bien para bootstrap 3

$("#mapModal").on("shown.bs.modal", function () {initialize();});

Answer 10

prueba esto !

<div class="modal fade" id="map_modal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"><div id="map_canvas" style="width:530px; height:300px"></div></div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

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, "");
})

Answer 11

 this works for me
**<!-- Modal -->**
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Google Maps</h4>
</div>
<div class="modal-body">
<div id="map_canvas" style="width:auto; height: 500px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
**Button**
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Map</button>
**javascript**
<script type="text/javascript">
function initializeMap() {
var mapOptions = {
center: new google.maps.LatLng(51.219987, 4.396237),
zoom: 12,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.219987, 4.396237)
});
marker.setMap(map);
}
//show map on modal
$(''#myModal'').on(''shown.bs.modal'', function () {
initializeMap();
});
</script>

espero que esto ayude