2011-10-14 107 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" }); 
}