Showing a google maps on bootstrap modal

Question

My bootstrap3 modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="map-canvas" style="width:530px; height:300px;"></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>
  </div>
</div>

My javascript:

    <script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>
<script type="text/javascript">



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

        var lat = 10.444598;
        var lon = -66.9287;

        function init() {
            var mapDiv = document.getElementById('map-canvas');
            var map = new google.maps.Map(mapDiv, {
                center: new google.maps.LatLng(lat, lon),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lon),
                map: map,
                title: 'Hello World!'
            });
        }



    }

</script>

I read a few threads here on stackoverflow regarding this issue, but i tried to implement the solutions into my code. However my modal is still blank. What am i doing wrong?

have you logged the triggering of shown.bs.modal event? There are at least two degrees of freedom and you still to narrow it down to see which part is not working. — ffflabs, Jun 13 '14 at 12:16
See my answer http://stackoverflow.com/questions/43401812/show-map-on-bootstrap-modal/43401849#43401849 — OB Kenobi, Apr 18 '17 at 21:17

score 1 · Answer 1 · edited May 23 '17 at 12:02

If you add Google Maps to a ModalWindow you can run into different problems as described here:

ModalWindow / Google Maps

I tried to avoid those loading issues:

 <div id="mapCanvas" class="map_popup"></div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h2 class="fontface" id="myModalLabel">Header</h2> 
</div> 

<div class="modal-body">
    <div class="load_map">
</div>

loading a map at the beginnning (#mapCanvas)

append it to the ModalWindow (.load_map)

//JS Part
var popupmap = (function() {

var map_popup, marker_popup, geocoder, latLng;

//init the code for the popup
var init = function() {

    geocoder = new google.maps.Geocoder();

    latLng = new google.maps.LatLng(52.524744168143755, 13.417694102972746);

    map_popup = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 10,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        streetViewControl: false,
        panControl:false,
        zoomControl: false 
    });


    google.maps.event.addListenerOnce(map_popup, 'idle', function(){
       $('.load_map').append($('#mapCanvas'));
    });


};

Hope this helps.

score 0 · Answer 2 · edited Jun 13 '14 at 13:35

<!DOCTYPE html>
<html>

<head>
    <title>Map</title>

</head>

<body onLoad="init()">
    <div id="map_canvas" style="width:800px; height:500px"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript">
        $("#myModal").on("shown.bs.modal", function () {
            init();
            google.maps.event.trigger(map, "resize");
        });

        var lat = 10.444598;
        var lon = -66.9287;


        function init() {

            var myOptions = {
                zoom: 6,
                center: new google.maps.LatLng(lat, lon),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lon),
                map: map,
                title: 'Hello World!'
            });
        }

        google.maps.event.addDomListener(window, 'load', init);
    </script>
</body>

</html>

Try this ,it will run fine. – Ankit Dubey Jun 13 '14 at 13:57 — Ankit Dubey, Jun 13 '14 at 13:57

Showing a google maps on bootstrap modal

2 Answers2