我需要在单个Google地图中显示多个标记
我尝试放置代码，
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps?file=api&v=2&key=my_key" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
latLngs = [
new google.maps.LatLng(44.3118328, -79.5549532),
new google.maps.LatLng(44.3118325, -80.5549533),
new google.maps.LatLng(44.3118326, -81.5549534),
new google.maps.LatLng(44.3118327, -82.5549535)
];
var latlng = new google.maps.LatLng(44.3118328, -79.5549532);
myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var contentString = '<div id="mapinfowindow">'+'1970 Thompson St <br> Innisfil' + '<br>' + '$329,900'
+'<a href="http://www.something.com/Featured_Listings_files/1970%20Thompson%20-%20Brochure.pdf"><br><br>View Brochure</a></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
var image = new google.maps.MarkerImage(
'images/marker.png',
new google.maps.Size(50,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);
var shadow = new google.maps.MarkerImage(
'images/markershadow.png',
new google.maps.Size(78,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);
var shape = {
coord: [28,3,32,4,35,5,37,6,38,7,39,8,40,9,42,10,42,11,43,12,44,13,44,14,44,15,45,16,45,17,45,18,45,19,45,20,45,21,45,22,45,23,44,24,44,25,44,26,43,27,43,28,42,29,41,30,41,31,40,32,39,33,39,34,38,35,37,36,36,37,35,38,34,39,33,40,32,41,31,42,30,43,29,44,28,45,26,46,24,47,24,47,22,46,21,45,19,44,18,43,17,42,16,41,15,40,14,39,13,38,12,37,12,36,11,35,10,34,9,33,9,32,8,31,7,30,7,29,6,28,5,27,5,26,4,25,4,24,4,23,4,22,3,21,3,20,3,19,3,18,4,17,4,16,4,15,4,14,5,13,6,12,6,11,7,10,8,9,9,8,10,7,12,6,14,5,16,4,20,3,28,3],
type: 'poly'
};
var markers = new Array(latLngs.length);
for (var i = 0; i < markers.length; i++) {
markers[i] = new google.maps.Marker({
position: latLngs[i],
title:"Marker "+i,
icon: image,
shadow: shadow,
map: map,
shape: shape
});
markers[i].setMap(map);
}
for (var i2 = 0; i2 < markers.length; i2++) {
google.maps.event.addListener(markers[i2], 'click', function() {
infowindow.open(map,markers[i2]);
});
}
}
</script>
<div id="map_canvas" style="width: 691px; height: 466px; overflow:hidden;" class="bdr-grey"> </div>
这给了我javascript错误google.maps.MapTypeId undefined
我还需要在此实现多个标记。
所以请帮我这样做..
感谢您抽出时间给我..
答案 0 :(得分：1)
问题是您正在嵌入Google Maps API v2（http://maps.google.com/maps?file=api&v=2&key=my_key），但您正在使用Google Maps API v3的方法和对象。由于您的其余代码适用于Google Maps v3，请尝试按以下方式调用Google Maps API：
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
答案 1 :(得分：0)
<script type="text/javascript" language="javascript">
window.onload = function () {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "StoreLocations.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var x = xmlDoc.getElementsByTagName("CityName");
var mapOptions = {
center: new google.maps.LatLng(39.8634242, -98.18818149999998),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
// marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < x.length; i++) {
var latitudetest = x[i].getElementsByTagName("latitude")[0].childNodes[0].nodeValue;
var longitudetest = x[i].getElementsByTagName("longitude")[0].childNodes[0].nodeValue;
var data = '<div style="min-width:175px;text-align:left; min-height:80px;color:#000000;font-family:arial,sans-serif;font-style:normal; font-size:13px;">' + '<span style="font-weight:bold;font-size:13px;color:#000000;font-family:arial,sans-serif;font-style:normal; ">' + '1-800 Car Cash of' + ' ' + x[i].getElementsByTagName("storename")[0].childNodes[0].nodeValue + '</span>' + '<br/>' + x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue + '<br/>' + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + ' ' + x[i].getElementsByTagName("zipcode")[0].childNodes[0].nodeValue + '<br/>' + x[i].getElementsByTagName("phoneno")[0].childNodes[0].nodeValue + '<br/>' + '<div style="padding-top:6px;">' + '<a href="https://maps.google.com/maps?daddr=' + x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue + "," + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + '" style="font-family:arial,sans-serif;font-style:normal;text-decoration: none;color:Blue; font-size:13px;" target="_blank">' + "Get Directions" + '</a>' + '</div>' + '</div>';
var myLatlng = new google.maps.LatLng(latitudetest, longitudetest);
var bluePin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
new google.maps.Size(32, 32),
new google.maps.Point(0, 0),
new google.maps.Point(14, 35));
var pinShadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
new google.maps.Size(59, 32),
new google.maps.Point(0, 0),
new google.maps.Point(14, 35));
var marker = new google.maps.Marker({
position: myLatlng,
icon: bluePin,
shadow: pinShadow,
map: map,
title: x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
});
(function (marker, data) {
google.maps.event.addListener(marker, 'click', function (e) {
infoWindow.setContent(data);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
我已经为每个商店位置从xml文件加载纬度和经度。
答案 2 :(得分：-1)
检查此脚本，
<script type="text/javascript">
var locations = [
['Bondi Beach', 16.7997751, 96.15659660000906, 4],
['Coogee Beach', 16.7897762, 96.15659660008007, 5],
['Cronulla Beach', 16.775815, 96.13637070000004, 3],
['Manly Beach', 16.7996784, 96.15659660000609, 2],
['Maroubra Beach', 16.7497795, 96.15659660050010, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(16.7997751, 96.15659660000006),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>