来自地址的标记人口

时间:2013-03-30 02:22:53

标签: javascript google-maps google-maps-api-3

以下是我的代码,我用来从数组地址填充标记,但它没有显示任何标记,也没有映射到相应的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>

1 个答案:

答案 0 :(得分:2)

为了显示地图,您需要使用CSS为#map_canvas提供绝对宽度/高度。

示例小提琴:http://jsfiddle.net/sCvJk/