当我打开模式弹出窗口以显示地图时，第一次加载地图

Question

When I open modal popup to show map, the first time map is loaded but when I click second time it will not loaded but if click on map div then it appears.

I tried lot of times to solve this but I failed. Here's my code that how I opened modal with map

<script src="<?php echo base_url();?>js/farm_gmaps.js"></script>
<script type="text/javascript">

$(document).ready(function(e) 
{
    <?php if($farm['latitude'] && $farm['longitude']){?>
        var lat  = '<?php echo $farm['latitude'];?>';
        var long = '<?php echo $farm['longitude'];?>';
    <?php }else{?>
        var lat  = '21.06656';
        var long = '72.94922';
    <?php }?>

    //initialize(lat,long,""); 

    $('#add_farm_popup').on('show.bs.modal', function (e) 
    {
        //alert("asdasd")
        initialize(lat,long,""); 
    });

});

Please note that this code in opened popup document ready.

here's my design code .

          <div class="right" id="farm_map">
          </div>
          <div class="contact_map">
           <input id="searchTextField" class="form-control" type="text" size="30" placeholder="Enter a location" value="<?php echo $farm['address'];?>">
          </div>

Here's my JavaScript code

    var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) 
{
    geocoder.geocode
    ({
        latLng: pos
    }, function(responses) 
    {

        if (responses && responses.length > 0) 
        {
            //console.log(responses[0]);
            updateMarkerAddress(responses[0].formatted_address,pos.lat(),pos.lng());
        } 
        else 
        {
            //updateMarkerAddress('Cannot determine address at this location.');
            alert('Cannot determine address at this location.');
        }
    });
}

function updateMarkerAddress(address,lat,lng) 
{
    console.log(lat);
    console.log(lng);

    $("#latitude").val(lat);
    $("#longitude").val(lng);
    $("#address").val(address);
    /*$("#temp_latitude").val(lat);
    $("#temp_longitude").val(lng);
    $("#text_location_address").val(address);
    $("#address").val(address);

    var split_address = address.split(",");
    var length = split_address.length;
    var city   = split_address[length-3].trim();
    var country = split_address[length-1].trim();

    $("#country").val(country);
    $("#city").val(city);*/
}

function initialize(lat,long) 
{   
    /*var goo = google.maps,
        map = new goo.Map(document.getElementById('farm_map'), {
            zoom: 5,
            center: new goo.LatLng(lat,long),
            mapTypeId: google.maps.MapTypeId.HYBRID
        }),
        shapes = [],
        selected_shape = null,
        byId = function(s) {
            return document.getElementById(s)
        };*/

    var bounds = new google.maps.LatLngBounds();
    var latLng = new google.maps.LatLng(lat,long);

    var mapOptions = 
    {
        center: latLng,
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById('farm_map'),
    mapOptions);



    var input = (document.getElementById('searchTextField'));//Only Support The Input Field in google map js
    var autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.bindTo('bounds', map);

    var infowindow = new google.maps.InfoWindow();

    var marker = new google.maps.Marker
    ({
        position: latLng,
        map: map,
        draggable: true
    });


    google.maps.event.addListener(marker, 'dragend', function() 
    {   
        geocodePosition(marker.getPosition());
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function() 
    {   
        infowindow.close();
        marker.setVisible(false);
        input.className = '';
        var place = autocomplete.getPlace();
        if (!place.geometry) 
        {
            // Inform the user that the place was not found and return.
            input.className = 'notfound';
            return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) 
        {
            map.fitBounds(place.geometry.viewport);
        } 
        else 
        {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
        }
        marker.setIcon(/** @type {google.maps.Icon} */
        ({
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(35, 35)
        }));
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);
        geocodePosition(marker.getPosition());
        var address = '';
        if (place.address_components)
        {
            address = [
            (place.address_components[0] && place.address_components[0].short_name || ''),
            (place.address_components[1] && place.address_components[1].short_name || ''),
            (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
        }

        infowindow.setContent('<div><strong><u>' + place.name + '</u></strong><br>' + address);
        infowindow.open(map, marker);
    });
    bounds.extend(latLng);
    map.setCenter(bounds.getCenter());
    map.fitBounds(bounds);

    google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
    geocodePosition(event.latLng);

//      alert(event.latLng);
  });
     // Sets a listener on a radio button to change the filter type on Places
     // Autocomplete.
    /*function setupClickListener(id, types) 
    {
        var radioButton = document.getElementById(id);
        google.maps.event.addDomListener(radioButton, 'click', function() 
        {
            autocomplete.setTypes(types);
        });
    }*/
    //setupClickListener('changetype-all', []);
    //setupClickListener('changetype-establishment', ['establishment']);
    //setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);


function placeMarker(location) {

    var mapProp = {
    center:location,
    zoom:2,
    mapTypeId:google.maps.MapTypeId.HYBRID
    };

  map = new google.maps.Map(document.getElementById("farm_map"),mapProp);
    var marker = new google.maps.Marker({
    position: location,
    map: map,
    draggable: true
  });

    google.maps.event.addListener(marker, 'dragend', function() 
    {   
        geocodePosition(marker.getPosition());
    });
 google.maps.event.addListener(map, 'click', function(event) {
    placeMarker1(event.latLng);
    geocodePosition(event.latLng);
  });


 }

First case

Answer 1

Try this. It's just a guess but it might work.

var initialised = false;
var map;
 $('#add_farm_popup').on('show.bs.modal', function (e) 
    {
        If(initialised === false){
            initialize(lat,long,""); 
            initialised = true;
         }else{
            google.maps.event.trigger(map, 'resize');
         }
    });