CODEWITHSUNDEEP
javascriptgoogle-mapstwitter-bootstrap
Lord Vermillion
Lord Vermillion

Reputation: 5424

Showing a google maps on bootstrap modal

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?

Upvotes: 0

Views: 2334

Answers (2)

mboeckle
mboeckle

Reputation: 972

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

  1. 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.

Upvotes: 1

Ankit Dubey
Ankit Dubey

Reputation: 19

<!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>

Upvotes: 0

Related Questions