Google maps. Image vide

Question

J'ai essayé tout ce que je pouvais penser, mais la première fois que la page se charge, j'ai une image google grey, après le rafraîchissement fonctionne.

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

Comment puis-je obtenir l'image d'une carte google recherche par adresse?

EDIT: http://jsfiddle.net/qzygw4jL/4/

Answer 1

géocodage est une opération asynchrone et vous n'êtes pas attendre le résultat avant l'initialisation de la carte. Vous devez appeler initializeInstant() dans le rappel de géocodage comme ceci:

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