Zoom button and Street View do not appear in Modal Boostrap

Asked

Viewed 543 times

1

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?

inserir a descrição da imagem aqui

<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;
}
  • 1

    I opened the fiddle here and it’s normal...

  • These two links are examples in which I took the code only.

  • Then post your code here at Sopt

  • 1

    Marcelo Aymone, posted my code.

2 answers

2


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.

  • Migmar, there would be no way you could test in a modal using this template that in this case I am using, follow the link to donwload: minhateca.com.br/Claytonferraz/Iclinical/.... I did some tests and noticed that the problem happens because of css: css/Adminlte.css and by js: js/Adminlte/app.js, but I couldn’t solve the problem. If you want to try.

  • I updated my answer with the test to your template. @Pedro A.

  • Migmar, thanks. I was able to fix the css code you put in the answer. js was already right. Thanks...

0

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>

inserir a descrição da imagem aqui

  • http://jsfiddle.net/u3e3zwuf/

  • This part of the code is working normal, what is not and the zoom icon and street view, see the image I posted, the icons get distorted.

  • With the changes I posted, here it worked, look the fiddle.

  • I saw what you did, here you are loading the map normally, just the icon as I described it appears that way. You understand my problem ?

  • I get it, but here, I’m seeing with the icon, in the fiddle I posted, is appearing normally.

  • I even posted an image. rs

  • That is the question...rsrs. In fiddle it appears normally, but in my code it is not that, because it is exactly the same as what you posted there.

  • Cache problem?? Try to empty the browser cache, or use Chrome with cache disabled and try again. More than that, it gets complicated, it seems to be something in your environment.

  • I’m using the Adminlte-master template.

  • Marcelo Anymone, there’s no way you could test using this template I’m using, follow the link to donwload: http://minhateca.com.br/ClaytonFerraz/Iclinical/AdminLTE-master,69152643.zip%28archive%29. I did some tests and noticed that the problem happens because of css: css/Adminlte.css and by js: js/Adminlte/app.js, but I couldn’t solve the problem. If you want to try.

Show 5 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.