Google maps api 3 谷歌地图。空白图像

我尝试了我能想到的一切，但是第一次加载页面时，我有一个空白的谷歌灰色图像，在刷新后，它工作了

<script>
var latitude,longitude;
function GetLocationInstant() {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': '7521 Reindeer Ct, Las Vegas, NV 89147' /* This address will come from a post variable*/ }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            latitude = results[0].geometry.location.lat();
            longitude = results[0].geometry.location.lng();
            // console.log("Latitude: " + latitude + "\nLongitude: " + longitude);
        } else {
            console.log("geocoder.geocode() failed.<?php echo $address; ?>");
        }
    });
};


var map;
function initializeInstant() {
    var image = "http://example.com/wp-content/themes/mytheme/icon.gif";
    // console.log(latitude,longitude);
    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 20,
        center: myLatlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: image
    });
}
GetLocationInstant();
if ('undefined'!==latitude&&'undefined'!==longitude)
    google.maps.event.addDomListener(window, "load", initializeInstant);
</script>
<div style="height: 200px;margin-bottom: 20px;padding: 0px" id="map-canvas"></div>

纬度、经度；
函数GetLocationInstant（）{
var geocoder=new google.maps.geocoder（）；
geocoder.geocode（{'address'：'7521 Reinder Ct，Las Vegas，NV 89147'/*此地址将来自post变量*/}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
纬度=结果[0]。几何体。位置。纬度（）；
经度=结果[0]。几何体。位置。lng（）；
//console.log（“纬度：+纬度+”\n长度：+经度）；
}否则{
log（“geocoder.geocode（）失败”）；
}
});
};
var映射；
函数初始化instant（）{
var图像=”http://example.com/wp-content/themes/mytheme/icon.gif";
//console.log（纬度、经度）；
var mylatng=new google.maps.LatLng（纬度、经度）；
变量映射选项={
缩放：20，
中心：myLatlng，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
图标：图像
});
}
GetLocationInstant（）；
if（'undefined'！==纬度和&'undefined'！==经度）
google.maps.event.addDomainListener（窗口，“加载”，初始化instant）；

如何通过地址搜索获得谷歌地图图像？

---

编辑：

地理编码是一种异步操作，在初始化地图之前，您无需等待结果。您应该在geocoder回调中调用

initializeInstant（）

，如下所示：

var latitude,longitude, map;
function GetLocationInstant() {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 
        'address' : '7521 Reindeer Ct, Las Vegas, NV 89147 '
        }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            latitude = results[0].geometry.location.lat();
            longitude = results[0].geometry.location.lng();
            // Initialize map after address is found
            initializeInstant();
        } else {
            console.log("geocoder.geocode() failed.<?php echo $address; ?>");
        }
    });
};

function initializeInstant() {
    var image = "http://example.com/wp-content/themes/mytheme/icon.gif";
    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 20,
        center: myLatlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: image
    });
}

google.maps.event.addDomListener(window, "load", GetLocationInstant);

var纬度、经度、地图；
函数GetLocationInstant（）{
var geocoder=new google.maps.geocoder（）；
地理编码器。地理编码（{
'地址'：'7521驯鹿Ct，内华达州拉斯维加斯89147'
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
纬度=结果[0]。几何体。位置。纬度（）；
经度=结果[0]。几何体。位置。lng（）；
//找到地址后初始化映射
初始化instant（）；
}否则{
log（“geocoder.geocode（）失败”）；
}
});
};
函数初始化instant（）{
var图像=”http://example.com/wp-content/themes/mytheme/icon.gif";
var mylatng=new google.maps.LatLng（纬度、经度）；
变量映射选项={
缩放：20，
中心：myLatlng，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
图标：图像
});
}
google.maps.event.addDomListener（窗口“加载”，GetLocationInstant）；

---

您是否检查了浏览器的控制台是否有任何错误？没有错误。您的代码不完整。将您的代码复制并粘贴到a上，但它似乎缺少google API。请在您的问题中提供a，包括复制问题所需的任何HTML/CSS/外部javascript。添加了fiddle。这正是我的页面中的内容。