Question

这是我第一次使用Google地图时遇到了一个问题。

而不是加载地图，我得到一个灰色的屏幕。左下角的Google图标和右下角的使用条款已加载。

我还设置了一个标记，显示在地图上。

我试图搜索多天的分辨率（使用调整大小，首先初始化地图等等）无济于事。这是我的javascript：

function startJobMap(){
    var map;
    var marker;
    var myLatlng = new google.maps.LatLng(20.268455824834792,85.84099235520011);
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();

    $("#page_driver_jobdetails").on('pagebeforeshow', initialize);

    function initialize(){
        var mapOptions = {
        zoom: 15,
        center: {lat: 1.290270, lng: 103.851959},
    };

    map = new google.maps.Map(document.getElementById("driver_jobMap"), mapOptions);

    intializeMarker();
}

var pos = {
    lat: Number(sessionStorage.driverLat),
    lng: Number(sessionStorage.driverLng)
};

function intializeMarker(){
    var marker = new google.maps.Marker({
        position: {lat: 1.290270, lng: 103.851959},
        map: map
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
    //google.maps.event.trigger(map, 'resize');
};

这是我的HTML

<div id="page_driver_jobdetails" data-role="page">
<div data-role="header" data-position="fixed">
<a data-rel="back" class="ui-btn ui-btn-left ui-btn-icon-left ui-icon-carat-l">Back</a>
    <h1>Job Details</h1>
    </div>
<div class="ui-content">
<div class='ui-grid-b'>
    <div class='ui-block-a'>
    <div id="currentDate"></div>
    </div>
    <div class='ui-block-b'>
    <div id="tyreman"></div>
    </div>
    <div class='ui-block-c'>
    <div id="currentTime"></div>
    </div>
    </div>
</div>
<div id="driver_jobMap" style="width:400px;height:400px;"></div>

如何解决此问题？

Answer 1

我已经解决了我的问题;我没有意识到jQuery需要在页面加载后调用函数。

我已遵循本文中提供的决议：

http://www.gajotres.net/using-google-maps-javascript-api-v3-with-jquery-mobile/

我很遗憾忘记我正在使用jquery mobile，我不认为这个问题在那里撒谎。

Google Maps API v3灰色地图;标记已加载

1 个答案: