Google map in fullscreen with bootstrap modal

user_1406168 0
Viewed 1765

I have a google map. When I click a marker I show a bootstrap modal with style="z-index:999999999999999999999999999". No problems here. However when I click the fullscreen button, the the modal is not shown anymore. It only works in normal mode. Any suggestions how to fix this?

To see a sample see: http://jsfiddle.net/segato/e8w4wmh6/

var myCenter = new google.maps.LatLng(51.508742, -0.120850);

function initialize() {
var mapProp = {
    center: myCenter,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
    position: myCenter,
});
marker.setMap(map);

google.maps.event.addListener(marker, 'click', function () {

            $('#myModal').modal('show'); 
        });
}

google.maps.event.addDomListener(window, 'load', initialize);

Click the marker. Then click the full screen icon and then click a marker.

twitter-bootstrap-3 google-maps-api-3
2 Answers

The point is that fullscreen mode use fullscreen API so anything outside the fullscreen element (in this case the map DIV) remains backward.

A workaround can be to append the modal element to the map div, for example exploiting the custom controls API.

 map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById("myModal"));

See working fiddle.

N.B. I have disable modal background because in the maps it came out with a wrong z position, coming of top of the modal. I think would not be difficult to fix that if you need the background.

user_12598150
user_196723190
Related