Google Map not Loading after jquery show() function
<p>My problem is that google map is not loading after show() function calls in jquery. I'm using display:none for closing division on page load. SO i figure out that it's done through google.maps.event.trigger(map, 'resize') but i don't know <strong>where to place google.maps.event.trigger(map, 'resize') it in my jquery</strong>. Bootstrap model pop up properly showing map and address and other functionalities are working fine. But after click on show function of jquery it's not loading properly. </p>

<p>I have read these questions on SO : 1). (<a href="https://stackoverflow.com/questions/4700594/google-maps-displaynone-problem">Google Maps Display:None Problem</a>)
2) (<a href="https://stackoverflow.com/questions/13059034/how-to-use-google-maps-event-triggermap-resize">How to use google.maps.event.trigger(map, &#39;resize&#39;)</a>)</p>

<pre><code>&lt;script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBNEQCHUYPsekbYz7tym8Q4Ne2vlUsvnFc"&gt;&lt;/script&gt;
            &lt;!-- &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt; --&gt;
            &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
            &lt;script&gt;
            $(document).ready(function(){
            $(".address_open").click(function(){ 
                    // i don't know the placing of this function. 
                    google.maps.event.trigger(map, 'resize');
                    $(".Mymap1").show();
            });
            });
            &lt;/script&gt;
            &lt;script type="text/javascript"&gt; 
                var map;
                var marker;
                var coords = new google.maps.LatLng();
                var myLatlng = new google.maps.LatLng(23.022505,72.5713621);
                var geocoder = new google.maps.Geocoder();
                var infowindow = new google.maps.InfoWindow();
                function initialize(){
                    var mapOptions = {
                        zoom: 18,
                        center: myLatlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    map = new google.maps.Map(document.getElementById("myMap"), mapOptions);
                    google.maps.event.trigger(map, 'resize');
                    marker = new google.maps.Marker({
                        map: map,
                        position: myLatlng,
                        draggable: true 
                    });     

                    geocoder.geocode({'latLng': myLatlng }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) {
                                $('#address').val(results[0].formatted_address);
                                $('#latitude').val(marker.getPosition().lat());
                                $('#longitude').val(marker.getPosition().lng());
                                infowindow.setContent(results[0].formatted_address);
                                infowindow.open(map, marker);
                            }
                        }
                    });


                    google.maps.event.addListener(marker, 'dragend', function() {

                    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) {
                                $('#address').val(results[0].formatted_address);
                                $('#latitude').val(marker.getPosition().lat());
                                $('#longitude').val(marker.getPosition().lng());
                                infowindow.setContent(results[0].formatted_address);
                                infowindow.open(map, marker);
                            }
                        }
                    });
                });
                }
                google.maps.event.addDomListener(window, 'load', initialize);
            &lt;/script&gt;
</code></pre>

<p>Bootstrap Model</p>

<pre><code>&lt;div class="modal fade" id="myModal" role="dialog"&gt;
                        &lt;div class="modal-dialog modal-lg"&gt;
                          &lt;div class="modal-content"&gt;
                            &lt;div class="modal-header"&gt;
                              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                              &lt;h4 class="modal-title"&gt;Map View&lt;/h4&gt;
                            &lt;/div&gt;                          
                            &lt;div class="modal-body"&gt;
                              &lt;div id="myMap" class="Mymap1"&gt;&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="modal-footer"&gt;
                              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
</code></pre>

<p></p>

<p>Other division for click on map.</p>

<pre><code>     &lt;div class="form-group"&gt;
                              &lt;label&gt; Address&lt;/label&gt;
                              &lt;input type="text" id="address" data-toggle="modal" data-target="#myModal" name="txtName" value="&lt;?php if(isset($fname)){echo $fname;} else { echo ""; }  ?&gt;"  class="form-control abc address_open" /&gt;     
                                 &lt;input type="hidden" id="latitude" placeholder="Latitude"/&gt;
                                 &lt;input type="hidden" id="longitude" placeholder="Longitude"/&gt;                   
 &lt;/div&gt;
</code></pre>