Google Map Starts Path at Top Left Center on Bootstrap Modal

Question

I am working on google map. Onclick image, google map display on bootstrap modal, to display route path using latlng. All functionality is working properly but

The map start position marker, I want to center the marker position when the map is load, just now it's as per image. The start point it's in the top left corner. I have checked so many example, but all are not working in my code.

Also i tried using resize, trigger function.

google.maps.event.trigger(map, 'resize');

map = new google.maps.Map(document.getElementById("map_canvas"), {
     mapTypeId: google.maps.MapTypeId.ROADMAP
});

HTML

<a href="#mapModal" data-toggle="modal">Click</a>

Modal and Script

<div id="mapModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridModalLabel">Map Display</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid bd-example-row">
                        <div class="row">

                            <div id="map_polyline" style="width: 100%; height: 655px;"></div>

                            <script type="text/javascript">
                                function initialize() {

                                    var mapProp = new google.maps.Map(document.getElementById('map_polyline'), {
                                        zoom: 15,
                                        maxZoom: 30,
                                        minZoom: 1,
                                        streetViewControl: false,
                                        center: new google.maps.LatLng(23.01780,72.53076),
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                                    });

                                    var myTrip=new Array();

                                    myTrip.push(new google.maps.LatLng(23.01780,72.53076));
                                    myTrip.push(new google.maps.LatLng(23.01846,72.52987));
                                    myTrip.push(new google.maps.LatLng(23.01909,72.53054));
                                    myTrip.push(new google.maps.LatLng(23.01954,72.52991));
                                    myTrip.push(new google.maps.LatLng(23.02060,72.53064));
                                    myTrip.push(new google.maps.LatLng(23.02125,72.53006));
                                    myTrip.push(new google.maps.LatLng(23.02237,72.53076));
                                    myTrip.push(new google.maps.LatLng(23.02306,72.52988));
                                    myTrip.push(new google.maps.LatLng(23.02438,72.53021));
                                    myTrip.push(new google.maps.LatLng(23.02467,72.52899));
                                    myTrip.push(new google.maps.LatLng(23.02486,72.52769));
                                    myTrip.push(new google.maps.LatLng(23.02555,72.52695));
                                    myTrip.push(new google.maps.LatLng(23.02616,72.52656));
                                    myTrip.push(new google.maps.LatLng(23.02704,72.52641));
                                    myTrip.push(new google.maps.LatLng(23.02868,72.52664));
                                    myTrip.push(new google.maps.LatLng(23.03068,72.52700));
                                    myTrip.push(new google.maps.LatLng(23.03173,72.52555));

                                    var flightPath=new google.maps.Polyline({
                                        path:myTrip,
                                        strokeColor:"#0000FF",
                                        strokeOpacity:0.8,
                                        strokeWeight:2
                                    });
                                    flightPath.setMap(mapProp);
                                    google.maps.event.trigger(mapProp, 'resize');
                                }

                                google.maps.event.addDomListener(window, 'load', initialize);
                            </script>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

try this

$('#myMapModal').on('show.bs.modal', function() {
   resizeMap();
})

function resizeMap() {
   if(typeof map =="undefined") return;
   setTimeout( function(){resizingMap();} , 400);
}

function resizingMap() {
   if(typeof map =="undefined") return;
   var center = map.getCenter();
   google.maps.event.trigger(map, "resize");
   map.setCenter(center); 
}