Gmaps not working properly on js

Question

I've a gmap loading problem with Google JavaScript API and it does not load completely when initialized the project. I tried all of available solutions but it did not work. In addition, if reloaded or resized the page, it works.

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDWTQpi0GTmb6hoIjbBlcGYfZLAkaDmqLI"></script>
    @Scripts.Render("~/bundles/gmaps")
    <script type="text/javascript">
        $(document).ready(function () {
            var map = new GMaps({
                div: '#gmap_basic',
                lat: 25.261502,
                lng: 55.29155,
                zoom: 15,
                width: '100%',
                height: '300px',

            });
            map.addMarker({
                lat: 25.261502,
                lng: 55.29155,
            });
        })
    </script>

Html:

<div class="portlet-body">
    <div id="gmap_basic" class="gmaps"></div>
</div>

Just seems top left of the page! how can I fix this problem?

Answer 1

I'm using "bootstrap" my project. So, bootstrap provides a method to do this with the shown.bs.'your element tag' event. And I solved the problem. I hope that it will be useful to everbody.

Html

<div class="portlet-body">
    <div id="gmap_basic" class="gmaps"></div>
</div>

Js

<script type="text/javascript">
        $(document).ready(function () {
            $('#tabGmap').on('shown.bs.tab', function (e) {
                var Lat = 'your map lat';
                var Lon = 'your map lon';
                var map = new GMaps({
                    div: '#gmap_basic',
                    lat: Lat,
                    lng: Lon,
                    zoom: 14,
                    scaleControl: false,
                    width: '100%',
                    height: '300px',
                    center: new google.maps.LatLng(Lat, Lon)

                });
                map.addMarker({
                    title: 'Map title',
                    lat: Lat,
                    lng: Lon
                });
            });
        })

    </script>

Output