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，可能在主页面中，然后在模态中？尝试删除已加载的其中一个实例，并检查是否能解决您的问题。

谷歌地图没有显示在模态弹出窗口中

1 个答案: