Question

<a href="<?php echo 'https://maps.google.com/?q='.$listing->get_address1().$listing->get_city().$listing->get_state()?>" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" style="width:125px;height:125px;padding-top:8px"> 

    <div id ="map-canvas" style="width:125px;height:125px;"></div> 

    <div id ="full_map" style="border:1px solid #CCCCCC;padding-top:2px;font-size:12px;text-align:center;position:relative;top:-24px;left:7px;width:110px;height:16px;background-color:#FFFFFF">View Full Map</div> 

    </a> 

var map; 

function codeaddress() { 
    var address = "<?php echo $listing->get_address1()." ".$listing->get_city()." ".$listing->get_state(); ?>"; 
    geocoder = new google.maps.Geocoder(); 
    console.log(address); 
    geocoder.geocode({ 'address': address}, function(results, status){ 
    //alert('geocoding'); 
    if(status == google.maps.GeocoderStatus.OK){ 
     var mapOptions = { 
       center: results[0].geometry.location, 
       zoom: 10, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

    map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); 
    marker = new google.maps.Marker({ 
      position:results[0].geometry.location, 
       icon:'icons/orange_marker.png' 
    }); 
    marker.setMap(map); 
    console.log(document.getElementById("map-canvas")); 
    //alert('marker done'); 
    console.log(results[0].geometry.location); 
    google.maps.event.trigger(map, 'resize'); 
    } 
    else{ 
      alert('Could not find address as ' + status); 
    } 
     }); 
     /google.maps.event.addDomListener(window, 'load', codeaddress());//google.maps.event.trigger(map, 'resize')); 
        } 
    $(document).ready(function(){ 
      codeaddress(); 
      //google.maps.event.trigger(map, 'resize'); 
      //alert('I am done here'); 
    }); 

地圖畫布被填充每個頁面刷新時間。我需要知道如何在不刷新頁面的情況下填充地圖畫布。地址和地理代碼在函數中計算，但地圖不會填充。

Answer 1

我也遇到過這個問題，我通過觸發Google地圖resize事件解決了它。

google.maps.event.trigger(map, 'resize'); 

希望你能理解。