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
  • 314 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Taywin
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.