谷歌地圖不顯示在莫代爾彈出

Question

當您點擊此頁面郵政編碼旁邊的'查看地圖'時，模態彈出here未顯示地圖。

我早些時候這樣工作，但似乎無法使它在不同的位置工作，即使代碼是相同的。

這裏的HTML/JScript的：

<ul class="contact address clearfix"> 
    <li><a href='#myModal' role='button' data-toggle='modal'>View Map</a></li> 
</ul> 

<!-- Map Modal --> 
<div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Map and Directions</h3> 
    </div> 
    <div class="modal-body"> 
    <div id='map-canvas'></div> 
    </div> 
    <div class="modal-footer"></div> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?q=London&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script> 
<script type="text/javascript"> 

var map; 
    var marker = null; 

    function initialize() { 
     var mapOptions = { 
     zoom: 15, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var geolocate = function(address, callback) { 
      $.ajax({ 
        url: "http://maps.googleapis.com/maps/api/geocode/json", 
        data: { 
         "sensor": true, 
         "address": address 
        }, 
        dataType: "json", 
        success: function(d) { 
         if (d.status == "ZERO_RESULTS") callback(false); 
         if (d.results && d.results[0] && d.results[0].geometry) { 
          callback({ 
           "ne": d.results[0].geometry.bounds.northeast, 
           "sw": d.results[0].geometry.bounds.southwest, 
           "center": d.results[0].geometry.location 
          }); 
         } 
         else callback(false); 
        } 
       }); 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 
     geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) { 

      if(marker == null) { 
        marker = new google.maps.Marker({ 
         map: map, 
         clickable: false //remove if you want it clickable 
        }); 
       } 
       marker.setPosition(new google.maps.LatLng(c.center.lat, c.center.lng)); 
    }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

$('#myModal').on('shown', function() { 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(marker.getPosition()); //Center on your marker or replace it if you want to center it elsewhere 
}); 

</script> 
     <!-- End Map Modal --> 

任何想法表示讚賞

Answer 1

你得到以下錯誤控制檯：

Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. 

這意味着你已經包含了API超過一次，也許在主頁面，然後在模態？嘗試刪除已加載的實例之一，並檢查是否可以解決您的問題。