Zoom button and Street View do not appear in Modal Boostrap

Question

I’m loading Google Maps v3 into a Boostrap Framework modal. The problem is that I can’t see the zoom icons/button and Street View, they appear distorted in the blue square of the image. The right one was to appear in the red square as a pattern.

Follow these two examples to display in modal: 1) http://www.bootply.com/106702 2) http://jsfiddle.net/tkvw4skn/

Would anyone know what’s going on?

<a id="mapaInsere" href="#modalMapa" data-toggle="modal" title="Ver endereço no mapa" ><i class="fa fa-map-marker text-primary"></i></a>
<!-- MAPA MODAL -->
<div class="modal fade" id="modalMapa" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button id="btFechar1_modalSugestaoProblema" type="button" class="close" title="Fechar" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"> Endereço do problema</h4>
            </div>
            <div class="modal-body">

            <div id="map-canvas"></div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal --> 

javascript:

$(function(){ 

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

});

var map;
function initialize2() {
var mapOptions = {
   zoom: 8,
   center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

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

css:

html, body, #map-canvas  {
margin: 0;
padding: 0;
height: 100%;
}

#map-canvas {
max-width: none;
height:480px;
}

Answer 1

I’ve had a similar problem with the bootstrap and google maps api and solved with the following css rule:

#map-canvas img {
    max-width: none !important;
}

note that the rule is being applied to the images inside the DIV map-canvas, experiment with and without ! Important.

UPDATE After testing the Adminlte template with a map inside a modal I came across the problems with the controls and the map images. I did not find the reason for the problem but when resizing the page I found that the map is also resized and is correct. So I found the solution here: https://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap

The tested css is this:

#map-canvas {
  margin: 0;
  padding: 0;
  height: 400px;
  max-width: none;
}
#map-canvas img {
  max-width: none !important;
}

in the map file . js and after initializing the map

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

includes the following:

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

this will require an "update" of the map and in my test it worked.

You can also create your own modal window, get more control of the map and avoid these problems. You can see an example of a modal window I created to include Street View here http://www.viveraveiro.pt/mapa/aveiro/centro-cultural-e-de-congressos click on "Street view" to see the Street View.

Answer 2

1 - To work as in the examples, you need to load libraries or via CDN’s:

code.jquery.com/jquery-1.10.1.js //jquery
http://maps.google.com/maps/api/js?sensor=false //google maps
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css //bootstrap
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js

2 - use a class for the button to appear:

<a id="mapaInsere" href="#modalMapa" class="btn btn-default" data-toggle="modal" >
    <i class="fa fa-map-marker text-primary"></i>
    Ver endereço no mapa
</a>