Member Avatar for Vish0203

Hello,
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>
        <div id="map" class="modal-body">

        </div>
      </div>
    </div>
  </div>

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'),
          mapOptions);

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

          circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
          }
        });
        drawingManager.setMap(map);
      }

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

the image link below shows the exact problem

Click Here

Edited by Vish0203 because: hyperlink added
  • 2 Contributors
  • 3 Replies
  • 334 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

This is a very common symptom: the Maps API computes its layout when the map is created, so if the map DIV is hidden (Bootstrap modal is display:none) at that moment the tiles/controls can end up clipped or sitting in the top-left. initialized the map on window load while the modal was hidden, which is the likely root cause. See the canonical modal+maps discussion and the Maps examples for the same behavior. Showing a Google Map in a modal (StackOverflow) Simple Map example (Google Maps docs). (stackoverflow.com)

Two practical fixes (pick one): initialize the map only after the modal becomes visible, or keep your current init but force a redraw when the modal opens. The usual pattern is to use the modal’s shown event, then trigger a resize and re-center the map. Example (do not paste your full init function here — call it from the handler or make the map variable global):

// one-time init when modal is shown, or redraw if already created
$('#geo_modal').one('shown.bs.modal', function () {
  if (!window.myMap) {
    initializeMyMapOnce(); // call your map-creation routine here
  }
  google.maps.event.trigger(window.myMap, 'resize');
  window.myMap.setCenter(myMapCenter);
});

That handler must run after the modal animation ends (use shown.bs.modal for Bootstrap 3/4). Bootstrap modal events. (getbootstrap.com)

Also make sure the map container has an explicit height (percent heights need parent heights set). A safe CSS example:

#map { height: 400px; width: 100%; }
#map img { max-width: none; }   /* avoids Bootstrap image max-width conflicts */
#map label { width: auto; display: inline; }

Google’s examples show the requirement for an explicit height. (developers.google.com)

Troubleshooting notes: if the modal still shows a partial map, try dispatching the resize inside a small timeout or requestAnimationFrame so layout and repaint finish first. Ensure the map variable is accessible from the modal handler (attach it to window or the modal element). If using a newer Maps renderer (v3.32+), manual resize may be less necessary, but re-centering after show remains useful — see the Maps release notes for renderer changes. (stackoverflow.com)

This ties back to ’s pointers: the shown‑event + resize pattern is the standard, reliable fix.

Recommended Answers

All 3 Replies

Member Avatar for Taywin

Maybe this is the solution?

Member Avatar for Vish0203

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?

Member Avatar for Taywin

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.