Gmaps load when click two time on tab li in jquery

Question

I use a gmaps in a tab of modal for show google map. In my code when click on <li> of tab, load gmap again. but i see i must click two time on tab for load and show google map. my jquery code:

$('#LiGoogleMapEditThird').click(function() {

    //===================================================
    console.log("gooogle maap");

    UpdateMap = new GMaps({
        el: '#UpdateMap',
        lat: $('#UpdatelatGoogleMap').val(),
        lng:  $('#UpdatelngGoogleMap').val(),
        width: '95%',
        height: '350px',
        zoom: 16,
        click: function(e){

            UpdateMap.removeMarkers();

            UpdateMap.addMarker({
                lat: e.latLng.lat(),
                lng: e.latLng.lng(),
                draggable: true
            });

            //Set google lat in hidden input
            $('#UpdatelatGoogleMap').val( e.latLng.lat());
            //Set google lng in hidden input
            $('#UpdatelngGoogleMap').val(e.latLng.lng());

        }

    });


    UpdateMap.addMarker({
        lat: $('#UpdatelatGoogleMap').val(),
        lng:$('#UpdatelngGoogleMap').val(),
        draggable: true
    });


    UpdateMap.addControl({
        position: 'top_right',
        content: 'محل کنونی شما',
        style: {
            margin: '5px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#fff'
        },
        events: {
            click: function(){
                GMaps.geolocate({
                    success: function(position){
                        UpdateMap.setCenter(position.coords.latitude, position.coords.longitude);
                    },
                    error: function(error){
                        alert('Geolocation failed: ' + error.message);
                    },
                    not_supported: function(){
                        alert("Your browser does not support geolocation");
                    }
                });
            }
        }
    });



    GMaps.geolocate({
        success: function(position) {
            UpdateMap.setCenter(position.coords.latitude, position.coords.longitude);
        },
        error: function(error) {
            alert('Geolocation failed: '+error.message);
        },
        not_supported: function() {
            alert("Your browser does not support geolocation");
        }

    });

    $('#Updatebutton_Google_Serach').click(function(e){
        e.preventDefault();
        GMaps.geocode({
            address: $('#Updateaddress_with_google').val().trim(),
            callback: function(results, status){
                if(status=='OK'){
                    var latlng = results[0].geometry.location;
                    UpdateMap.setCenter(latlng.lat(), latlng.lng());
                    /* UpdateMap.addMarker({
                     lat: latlng.lat(),
                     lng: latlng.lng()
                     });*/
                }
            }
        });
    });
});

html code:

<!-- Nav tabs -->
<ul id="EditTabs" class="nav nav-tabs " role="tablist">
    <li  class="active">
        <a href="#first" role="tab" data-toggle="tab">
            <icon class="fa fa-user" ></icon> مشخصات
        </a>
    </li>
    <li><a href="#second" role="tab" data-toggle="tab">
            <i class="fa fa-picture-o"></i> عکس
        </a>
    </li>
    <li id="LiGoogleMapEditThird">
        <a href="#third" role="tab" data-toggle="tab">
            <i class="glyphicon glyphicon-map-marker"></i> نقشه
        </a>
    </li>
</ul>
..
.
<div class="tab-pane fade" id="third">

        <br>
        <br>
        <br>
        <label for="Updateaddress_with_google">آدرس را بر روی نقشه مشخص کنید</label>

        <div class="span11">
            <div id="UpdateMap"></div>
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-md-4">
                <button id="Updatebutton_Google_Serach" type="button" class="btn btn-info" >جستجو</button>
            </div>
            <div class="col-md-8">
                <input  type="text" id="Updateaddress_with_google" name="Updateaddress_with_google" placeholder="جستجو" class="form-control" />
            </div>

        </div>

        <input type="text" hidden id="UpdatelatGoogleMap">
        <input type="text" hidden id="UpdatelngGoogleMap">
        <br>
    </div><!-- End third Tab-->

for first click open same bellow: and in second one load completely:

Answer 1

this is because you must load gmaps when ta load completely. you can use setTimeout for load gmaps after loaded tab. this links are usefull:

https://github.com/hpneo/gmaps/issues/309

https://github.com/hpneo/gmaps/issues/448

and you must write same:

$('#LiGoogleMapEditThird').click(function() {


    function EditmapRefresh() {
        UpdateMap.refresh();
        EditGoogleSetting();
    }
    window.setTimeout(EditmapRefresh, 500);

});


//======
function EditGoogleSetting(){
    UpdateMap = new GMaps({
        el: '#UpdateMap',
        lat: $('#UpdatelatGoogleMap').val(),
        lng:  $('#UpdatelngGoogleMap').val(),
        width: '95%',
        height: '350px',
        zoom: 16,
        click: function(e){

            UpdateMap.removeMarkers();

            UpdateMap.addMarker({
                lat: e.latLng.lat(),
                lng: e.latLng.lng(),
                draggable: true
            });

            //Set google lat in hidden input
            $('#UpdatelatGoogleMap').val( e.latLng.lat());
            //Set google lng in hidden input
            $('#UpdatelngGoogleMap').val(e.latLng.lng());

        }
    });

    UpdateMap.addMarker({
        lat: $('#UpdatelatGoogleMap').val(),
        lng:$('#UpdatelngGoogleMap').val(),
        draggable: true
    });


    UpdateMap.addControl({
        position: 'top_right',
        content: 'محل کنونی شما',
        style: {
            margin: '5px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#fff'
        },
        events: {
            click: function(){
                GMaps.geolocate({
                    success: function(position){
                        UpdateMap.setCenter(position.coords.latitude, position.coords.longitude);
                    },
                    error: function(error){
                        alert('Geolocation failed: ' + error.message);
                    },
                    not_supported: function(){
                        alert("Your browser does not support geolocation");
                    }
                });
            }
        }
    });




    $('#Updatebutton_Google_Serach').click(function(e){
        e.preventDefault();
        GMaps.geocode({
            address: $('#Updateaddress_with_google').val().trim(),
            callback: function(results, status){
                if(status=='OK'){
                    var latlng = results[0].geometry.location;
                    UpdateMap.setCenter(latlng.lat(), latlng.lng());

                }
            }
        });
    });
}