谷歌地圖。空白圖片

我嘗試了所有我能想到的，但第一次加載頁面我有一個空白的谷歌灰色圖像，刷新工作後。谷歌地圖。空白圖片

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

我怎樣才能獲得一個谷歌地圖圖像按地址搜索？

編輯：http://jsfiddle.net/qzygw4jL/4/

來源

2014-08-29 Alqin

你檢查瀏覽器的控制檯中是否存在錯誤？ – 2014-08-29 19:29:40

沒有錯誤。 – Alqin 2014-08-29 19:33:48

您的代碼不完整。複製並將代碼粘貼到[JsFiddle示例]（http://jsfiddle.net/qzygw4jL/）上，它似乎缺少google apis。 – 2014-08-29 19:38:45

天氣預報是一個異步操作，你就不是在初始化地圖之前等待結果。你應該叫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);

Working demo

來源

2014-08-29 19:49:29

谷歌地圖。空白圖片

回答

相關問題