CODEWITHSUNDEEP
google-maps-api-3twitter-bootstrap-3
Thomas Segato
Thomas Segato

Reputation: 5223

Google map in fullscreen with bootstrap modal

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.

Upvotes: 3

Views: 2891

Answers (2)

user19672319
user19672319

Reputation: 1

The solution proposed did not worked for me but inspired from this page it's OK : Google maps tool tip not working full screen mode

document.getElementById('map_canvas').firstChild.appendChild(document.getElement
ById("modalLarge"));

Upvotes: 0

Fabiano Taioli
Fabiano Taioli

Reputation: 5540

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.

Upvotes: 2

Related Questions