2016-10-26 55 views
0

我使用下面的代碼來顯示谷歌地圖模態彈出。但Google Map標記不顯示在模式的中心。它總是隱藏在左側角落。谷歌地圖標記不顯示中心莫代爾彈出

Map image

<script> 
    var geocoder; 
    var map; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(0.0, 0.0); 
    var mapOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(0.0, 0.0), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    } 


    function codeAddress(i) {  

    var address = document.getElementById('address'+i).value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      zoom:10, 
      position: results[0].geometry.location 
     }); 

     google.maps.event.addListenerOnce(map, 'idle', function() { 
     google.maps.event.trigger(map, 'resize'); 
     }); 

     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 

    } 

</script> 

而且see the code here

+0

更容易與示例頁:)首先,他們沒有使用您的LatLng變種。刪除它(或使用它:))據我所知,映射空閒時會調用映射重繪。你確定閒置事件被解僱嗎? – Nico

+0

我從動態變量中獲取LatLng。它的工作很好。我也看到了標記。問題是它顯示左邊角落。我如何將這一個移動到地圖的中心?請幫忙 –

+0

手動的map.setCenter(latLng)能解決你的問題嗎?如果是的話,這意味着你的地圖中心沒有被gmap很好地使用。在這種情況下,只需在重繪後設置地圖中心即可。 – Nico

回答

0

這也涉及到Google map modal issue

請儘量使用模式的事件處理程序給出solution由@SSR:

引導莫代爾地圖問題解決方案:

$(document).ready(function(){ 
    $('#locationMap').on('shown.bs.modal', function(){ 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195)); 
    }); 
}); 

解決方案在此相關SO post也可能有幫助。