0

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: hyperlink added

2
Contributors
3
Replies
12
Views
3 Years
Discussion Span
Last Post by Taywin
0

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?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.