2011-10-14 89 views
0

我需要知道如何在地图上添加谷歌地图v3上的多个标记。我正在一个拥有10家企业名单的网站上工作,每个网页都有他们的地址,还有一张地图可以找到他们。我只为一个企业提供了一张地图,但我需要知道如何对存储在名为address1,... 2,... 3,... 4的变量中的多个地址进行impliment。以下是我的代码一个业务:谷歌地图V3来自地址的多个标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Multiple Map</title> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var map; 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 14, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
var address = '52+E+20th+St, New+York, NY'; 
var address1 = '42+E+29th+St, New+York, NY'; 
var address3 = '56+W+25th+St, New+York, NY'; 
var address4 = '26+W+21th+St, New+York, NY'; 

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); 
    } 
}); 
    } 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:500px; height:250px"></div> 
</body> 
</html> 

回答

2

最近做了大致相同的事情:在下面的例子中,r包含地图中心的纬度和经度,和标记列表。每个标记都有一个纬度和经度,为标记显示一些文本,并为每个结果使用一个不同的图标。

通过简单地创建多个标记并给出相同的map实例即可添加多个标记。地图库足够聪明,可以将它们全部展示出来。

var latlng = new google.maps.LatLng(r.dest.lat, r.dest.lng); 
var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

for (marker in r.markers) 
{ 
    var m = r.markers[marker]; 
    var d = new google.maps.Marker({ position: new google.maps.LatLng(m.lat, m.lng), 
            map: map, 
            title: m.text, 
            icon:"http://www.google.com/mapfiles/marker" + m.l + ".png" }); 
}