javascript - 来自地址的标记人口

Question

以下是我用来从数组地址填充标记的代码，但它没有显示任何标记，也没有映射到相应的 div，请告诉我我做错了什么以及如何解决这个问题。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){

  var myOptions = {
    center: new google.maps.LatLng(54, -2),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var addressArray = new Array("41 Green Ln, Handsworth, Birmingham, West Midlands B21 0DE, UK","BT27 4SB","Norwich");
  var geocoder = new google.maps.Geocoder();
  var markerBounds = new google.maps.LatLngBounds();

  for (var i = 0; i < addressArray.length; i++) {
    geocoder.geocode( { 'address': addressArray[i]}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });

        markerBounds.extend(results[0].geometry.location);
        map.fitBounds(markerBounds);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }    

});
</script>
<div id="map_canvas"></div>

Answer 1

为了显示 map ，您需要使用 CSS 为 #map_canvas 指定绝对宽度/高度。

fiddle 示例:http://jsfiddle.net/sCvJk/