0

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 where to place google.maps.event.trigger(map, 'resize') it in my jquery. 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.

I have read these questions on SO : 1). (Google Maps Display:None Problem) 2) (How to use google.maps.event.trigger(map, 'resize'))

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBNEQCHUYPsekbYz7tym8Q4Ne2vlUsvnFc"></script>
            <!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> -->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
            <script>
            $(document).ready(function(){
            $(".address_open").click(function(){ 
                    // i don't know the placing of this function. 
                    google.maps.event.trigger(map, 'resize');
                    $(".Mymap1").show();
            });
            });
            </script>
            <script type="text/javascript"> 
                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);
            </script>

Bootstrap Model

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

Other division for click on map.

     <div class="form-group">
                              <label> Address</label>
                              <input type="text" id="address" data-toggle="modal" data-target="#myModal" name="txtName" value="<?php if(isset($fname)){echo $fname;} else { echo ""; }  ?>"  class="form-control abc address_open" />     
                                 <input type="hidden" id="latitude" placeholder="Latitude"/>
                                 <input type="hidden" id="longitude" placeholder="Longitude"/>                   
 </div>
Community
  • 1
  • 1
Bhavin
  • 2,070
  • 6
  • 35
  • 54

1 Answers1

1

Change below code to

        $(".address_open").click(function(){ 
                // i don't know the placing of this function. 
                google.maps.event.trigger(map, 'resize');
                $(".Mymap1").show();
        });

This

$('#myModal').on('show.bs.modal', function (e) {
  google.maps.event.trigger(map, 'resize');
  $(".Mymap1").show();//Am not sure what is this?
});

Cause you are already have data-target on button that is pointing to the modal. Inside 'show.bs.modal' event you can do more works, this fires on modal open

Anil Panwar
  • 2,592
  • 1
  • 11
  • 24