I'm trying to display the google map in a bootstrap modal. But only a part of the map is visible not the complete map.
here's my modal code, followed by the javascript for the map

<div id="geo_modal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title modal-primary">Sign-in</h4>
        <div id="map" class="modal-body">


the javascript

function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8

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

        var drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.MARKER,
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [

          circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1

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

the image link below shows the exact problem

Click Here

Recommended Answers

All 3 Replies

Maybe this is the solution?

Adding the resize trigger fixes the problem on changing the window size, but initially, when the page is loaded, the problem remains. Is there any other trigger that can help? Actually, the modal shows up when i click the button. But, in my javascript, I'm initializing the map on window load. Is that causing the problem?

Maybe this could give you some idea?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.