无法按地址打印地图

时间:2014-11-10 12:14:07

标签: jquery google-maps-api-3

按照Google Map Api 3示例。

在正文的底部,它还包括jquery文件,下面是

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

HTML

<table>
<tr><td>
<div id="map_canvas" class="address" style=" width: 100%; height: 200px;">San Francisco</div>
</td></tr>
<tr><td>
<div id="map_canvas" class="address" style=" width: 100%; height: 200px;">San Diego</div>
</td></tr><tr><td>
<div id="map_canvas" class="address" style=" width: 100%; height: 200px;">San Jose</div>
</td></tr></table>

JQuery的

var map;
var geocoder = new google.maps.Geocoder();

function initialize() {

  var mapOptions = {
    zoom: 9,
    panControl: false,
    streetViewControl: false,
    mapTypeControl: false
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

var address = $(".address");
var el;
address.each(function(){
   el = $(this).text();
   codeAddress(el);
});


function codeAddress(address) {
    alert(address);
  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,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

我第一次尝试使用googleMap Api 3 - 我四处寻找答案。

每个表行中都会打印出动态多个地址。因此,从div.address中获取每个地址,并将每个地址转换为纬度和经度,然后显示地图。

但是现在它不会检查每个地址或循环所有地址,以便在使用定位标记显示地图之前将其转换为纬度和经度。

为什么不循环每个地址?有没有办法从div.address中获取和循环地址作为文本并将其转换为显示地图?

JSFIDDLE DEMO

如您所见,jsfiddle上出现了1个不正确的地图:(

更新了#1

管理以显示包含所有标记的一个地图,但仍然无法为每个地址的每个标记获得3个单独的地图。无法理解为什么它只在第一行打印一个带有标记的地图。

感谢帮助和见解(如果有的话)

请帮助

0 个答案:

没有答案