Gmaps在js上无法正常工作

Question

我使用Google JavaScript API时遇到gmap加载问题，并且在初始化项目时无法完全加载。我尝试了所有可用的解决方案，但它没有用。此外，如果重新加载或调整页面大小，它的工作原理。

    <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>

就在页面的左上方！我该如何解决这个问题？

Answer 1

我正在使用＆＃34; bootstrap＆＃34;我的项目。因此，bootstrap提供了一种使用shown.bs.'your element tag'事件执行此操作的方法。我解决了这个问题。我希望它对任何人都有用。

<强> 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>

<强>输出