Using Google Maps within a Bootstrap modal window that is only partially loaded

The maps display perfectly fine in a regular div, but when placed inside a Bootstrap modal, only half or part of the map is visible. However, when I open the console, the issue resolves itself and the entire map is shown.

Photo without console opened

Photo with console opened

This is how I styled it:

<style>
#map_canvas{
    width:100%;
    height: 230px;
    border: 1px solid #333335;
    margin-bottom:20px;
}
</style>

HTML for the modal:

<!-- Map Modal -->
<div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="false">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-hidden="false">&times;</button>
                <h4 class="modal-title" id="mapModalLabel">Map: </h4>
            </div>
            <div class="modal-body" >
                <map id="map_canvas" nid="{{nhd.nid}}"></map>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
htmlcssgoogle-mapstwitter-bootstrap

Answer №1

According to the provided documentation

To adjust the map size, developers need to trigger this event on the map: google.maps.event.trigger(map, 'resize').

It is important to note that since the modal is hidden during map rendering, it is necessary to call 

google.maps.event.trigger(map, 'resize')
after displaying the modal.

The reason opening the console resolves the issue is because it prompts a resize of the container, in turn resizing and refreshing the map for correct rendering.

Answer №2

Invoke the Google Maps initialize function when the Bootstrap modal is displayed

for Bootstrap 4

$("#location_modal").on("shown.bs.modal",function(){
        initMap();
    })

Answer №3

In my case, utilizing a trigger did not provide any help. I decided to incorporate a JavaScript function called setTimeout, which initializes the map in a new map-canvas after opening my modal popup.

setTimeout(initialize, 500);

Answer №4

For your map initialize function, be sure to include the following code snippet:

var initialize;

initialize = function() {
  ...
  $("#modalWindowId").on("shown.bs.modal", function(e) {
    google.maps.event.trigger(map, "resize");
    return map.setCenter(markerLatLng); // Specify the center map coordinates here
  });
};

For further insights, visit this informative page:

Answer №5

I rely on the bootstrap modal 'shown.bs.modal' event to generate the map once the dialog appears.

$('#modalY').on('shown.bs.modal', function () {
    map = new google.maps.Map(document.getElementById('map-view'), mapConfig);
    position = new google.maps.LatLng(lat, long);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align two spans vertically in a div using Bootstrap

Struggling to create a left-hand side navigation card with Bootstrap and Bootstrap icons. The goal is to have the page name on the left and an icon on the right, but vertical alignment is posing a challenge. Take a look at the code snippet below: <b-li ...

htmlcsstwitter-bootstrapbootstrap-4

Error: JSDOM - The document variable has not been declared

After creating a basic webpage that displays a single message, I decided to experiment with JSDOM and encountered an error. Despite researching online examples and Stack Overflow questions, I have struggled to resolve even the most straightforward scenario ...

javascripthtmljsondomjsdom

Chrome fails to load webfont upon page initialization

Encountering a problem with loading a WebFont specifically on Chrome version "48.0.2564.82 m (64-bit)". The issue arises from the webfont not being applied upon page load or navigation, unless I manually refresh the page. Below is the snippet of code fro ...

htmlcssgoogle-chromewebfonts

Steps to create a thumbnail image following the insertion of an image into an input type="file" within a form, and subsequently submitting both elements on the form together

Currently, I am working on a form that enables users to upload images. Once the user submits the form, my goal is to create thumbnails for each image on the front-end and save them on the server afterwards. Due to security restrictions, changing the value ...

javascriptjqueryajaxhtml

How can you achieve the functionality of jQuery's hide() and show() in JavaScript?

Is there a JavaScript equivalent to my simple hide and show jQuery code? Here is my current code: $(document).ready(function() { $("#myButton").hide(); $("#1").click(function() { $("#myButton").show(); $("#myButton").click(function() { ...

javascriptjqueryhtml

A creative way to display a div upon hovering over a link dynamically

My website has dynamically generated a tags, each with its own corresponding div containing unique content and height. I want to make it so that when a user hovers over an a tag, the matching div is displayed. The div should appear at the position of the m ...

javascriptjqueryhtmlcss

Blur function not performing as anticipated

I am attempting to achieve a blur effect on a dialog pop-up. Currently, I am using the primeng p-dialog component for this purpose. <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu> <p-dialog head ...

javascripthtmlcssangularprimeng

Node.js web application encounters ECONNRESET and MongoNetworkError issues

Currently working on a website with Node.js, Express, and MongoDB (MLAB). The code is too long to post here. When I try to access my index page, app.get("/alumniport", (req, res) => { alumni.find((err, theAlumni) => { if (err) { res.redi ...

htmlnode.jsmongodbexpress

Ensuring HTML5 validation in Ionic

Currently, I am delving into the world of Ionic but encountering an issue with HTML5 validation not functioning as expected within the framework. Below is a snippet of my login form: <h3> Login </h3> <form> <input name="email ...

htmlionic-frameworkionic2

The method to extract data from a <td> element using BeautifulSoup

There is a page I'm working with that contains tables in its source code: <td class="ng-binding">9:20 AM</td>, <td class="ng-binding"><span class="ng-binding" ng-bind-html="objFlight.flight.stat ...

pythonhtmlbeautifulsouphtml-tablehtml-parsing

Simple steps to generate a static header in list view on asp.net

I'm struggling to keep my header fixed while scrolling and can't seem to figure it out. Below is my ListView Code: <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="FormSectionSubSectionItemRelID" OnSele ...

cssasp.netlistview

How to emphasize a portion of an expression in AngularJS using bold formatting

I have a specific goal in mind: to emphasize part of an angular expression by making it bold. To achieve this, I am working with an object obj which needs to be converted into a string str. obj = $scope.gridOptions1.api.getFilterModel(); for (var pr ...

javascripthtmlangularjsangularjs-scope

Is it possible for us to customize the angular material chip design to be in a rectangular shape

I recently implemented angular material chips as tags, but I was wondering if it's possible to customize the default circular design to a rectangle using CSS? ...

cssangularangular-material

Issues arising with VueJS array props when integrating Bootstrap

I am attempting to display two divs next to each other while iterating through props (which are essentially an array) in VueJS. When I have just a single element, everything functions properly. However, as soon as I include the v-for directive, the element ...

javascripttwitter-bootstrapvue.js

What is the best way to incorporate a dropdown menu into existing code without causing any disruption?

I've come across this question multiple times before, but I still haven't found a suitable answer or solution that matches my specific situation. (If you know of one, please share the link with me!) My goal is to create a basic dropdown menu wit ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having difficulty handling text overflow in Angular4 and HTML

I'm facing an issue with displaying a very large text in a table. Despite trying various attributes such as - { text-overflow: clip; } { text-overflow: ellipsis; } { text-overflow: ellipsis-word; } { text-overflow: "---"; } { text-overflow: ellip ...

htmlcssangular

A guide on accessing information from a post form using an express.js server

Issue: Whenever the client submits a form using a post request to the server, the express server receives an empty body (req.body = {}). Objective: My goal is to retrieve req.body.username and req.body.password on a post request from the client (using the ...

javascripthtmlnode.jsexpressbody-parser

Viewport height-responsive image not functioning as expected in Firefox browser

Is there a way to set an image to the 100% height of the browser window, with a small padding at the bottom, and have it centered on the page? I created an example in codepen that works well in Chrome and Safari, but not in Firefox. In Firefox, the image ...

imagefirefoxresponsive-designcss

How can I retrieve a text file using an API in a Next.js application?

Is there a way to download a text file using an API in Next.js? The console.log(ninjas) function is already displaying the correct information. I have tested the API with Postman and it works perfectly. When I use GET in Postman, the same information is ...

javascripthtmlnode.jsapinext.js

What causes scope to be undefined in Angular?

Using ionic to develop a hybrid app has been a smooth experience, especially with android! This is my login HTML: <body ng-app="starter"> <head> <script src="phonegap.js"></script> </head> <ion-header-ba ...

javascripthtmliosangularjs