MapMyIndia is not fully loaded but when I open developer tools (Press f12) it is working

Question

I am integrating MapMyIndia (https://www.mapmyindia.com/api/) in my project. I am showing this map in bootstrap modal. When I open modal, map is not fully loaded but if I open developer tools (Console - Press F12), it is working.

Help me on this

Before

After Inspect Element

After closing modal, and opening again, it works fine.

My Code is below

var start_end_markersList = new Array();
var advicemarkersList = [];
var via_points = "";
var map;
var full_path = window.location.origin;
var mapViaPoints = "";

    if (map == undefined || map == null)
                        map = new MapmyIndia.Map('map-container',
                            {
                                zoomControl: true,
                                hybrid: true,
                                traffic: true
                            });

                    get_route_result();

                    function get_route_result() {
                        remove_start_end_markersList();
                        remove_advice_marker();

                        var via_arr = '';
                        var start_points = latitude; //document.getElementById('start').value;/***get start points**/
                        var destination_points = longtitude; //document.getElementById('destination').value;/**get destination points**/
                        via_points = mapViaPoints; //document.getElementById('via').value;/**get via points**/

                        if (via_points) {
                            var v = via_points.split('|');
                            for (var i = 0; i < v.length; i++) {
                                var v_ar = v[i].split(',');
                                via_arr += ";" + v_ar[1] + "," + v_ar[0];
                            }

                        }
                        var advices_o = true;  //document.getElementById('advices_o').value;/**get advices option**/
                        var alternatives_o = true; //document.getElementById('alternatives_o').value;/**get alternatives option**/
                        var avoids = ''; //$('#avoids').val();

                        var eta = ""; try { eta = document.getElementById('eta').value; } catch (e) { }
                        var rtype = 0; // document.getElementById('rtype').value;
                        var rtype_payload = "&rtype=" + rtype;
                        var start_points_array = start_points.split(",");
                        var destination_points_array = destination_points.split(",");

                        var api_name = "route_adv";  //$("#api_name").val();
                        var api_call = api_name + "/driving/";

                        var rgn = 'ind';
                        rtype_payload = "";

                        var route_api_url_with_param = route_api_url + api_call + start_points_array[1] + "," + start_points_array[0] + via_arr + ";" + destination_points_array[1] + "," + destination_points_array[0] + "?alternatives=" + alternatives_o + rtype_payload + "&geometries=polyline&overview=" + (eta == 1 ? "simplified" : "full") + "&exclude=" + avoids + "&steps=" + advices_o + "&region=" + rgn;

                        show_markers("start", start_points_array);/*********show start points marker********/
                        show_markers("destination", destination_points_array); /*********show destination points marker********/

                        mapmyindia_fit_markers_into_bound(start_points_array, destination_points_array);

                        var encode = btoa(route_api_url_with_param);
                        getUrlResult(encode);
                    }

Answer 1

This code worked for me.

setTimeout(function () {
        map.invalidateSize();
     }, 400);