Zoom button and Street View do not appear on Modal Boostrap

Question

Zoom button and Street View do not appear on Modal Boostrap

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

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

Here are two examples to display in the modal: 1) link 2) link

Would anyone know to tell me what's going on?

<aid="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;
}

javascript java html5 css google-maps

asked by anonymous 10.03.2015 / 16:54

2 answers

0

1 - To work as in the examples, you need to load the 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>

10.03.2015 / 17:25

Why is the translation path not being found? Jumping between remote applications using the cordova (complex problem)

score 2 · Accepted Answer

I've had an identical problem with the bootstrap and google maps api, and I've solved the following css rule:

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

Notice that the rule is being applied to images within the map-canvas DIV, try with and without! important.

UPDATE After testing the AdminLTE template with a map within a modal I encountered problems with controls and map images. I did not find the reason for the problem but when I resized the page I noticed that the map is also resized and is correct. Then I found the solution here: link

The css tested is this:

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

in the map .js file 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 force 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 that I created to include Street View here link click "Street View" to see Street View.