Google maps. Blank Image - google-maps-api-3

Question

I tried everything I could think of, but the first time the page loads I have a blank google gray image, after refresh is working.
<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>
How can I get the a google map Image searching by address?
EDIT: http://jsfiddle.net/qzygw4jL/4/

Answer 1

Geocoding is an asynchronous operation and you're not waiting for the result before initializing the map. You should call initializeInstant() inside the geocoder callback like this:
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