Javascript 如何在谷歌地图上显示类似谷歌显示结果的项目

我需要显示一个带有多个标记的地图，我发现它有我正在寻找的东西，但问题是我需要在它旁边显示每个项目的标记

<c:forEach var="product" items="products">
   ${product.name}
</c:forEach>

${product.name}

我也检查了的答案，但没有多大帮助

谷歌地图代码

var pinColor = "FE7569";
var marker, i;

var address=[];
address[0] = "New york";
address[1] = "las vegas";
address[2] = "san francisco";
address[3] = "chicago";

// Set default map center location
var latlng = new google.maps.LatLng(latcenter,longcenter);

// Create pinShadow for each marker 
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com        /chart?chst=d_map_pin_shadow",
    new google.maps.Size(40, 37),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 35));

// Function to create the dynamic marker
function pinImage(i){
    return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
}

// Function to run once page has loaded
    function initialize(){     
   var geocoder=new google.maps.Geocoder(); 
// Set Default settigns for google map
var settings = {
    zoom: 3,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP};

// Start Google Maps and assign it to div on site
var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 
// loop though total numner of address in array
for (var i = 0; i < address.length; i++) {  
   (function(i) {

    // Use geocoder to grab latlong for user inputed address
    geocoder.geocode( { 'address': address[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // Redefine map center location
            if (i == 1){ map.setCenter(results[0].geometry.location); }

            // Create dynamic markers on map as per the address array
            var marker = new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location,
                title:address[i],
                zIndex: i,
                // PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??  
                icon: pinImage(i),
                shadow: pinShadow
            });         
        }
       });
     })(i);
    }
    }
google.maps.event.addDomListener(window, 'load', initialize)

var pinColor=“FE7569”；
var标记，i；
var地址=[]；
地址[0]=“纽约”；
地址[1]=“拉斯维加斯”；
地址[2]=“旧金山”；
地址[3]=“芝加哥”；
//设置默认地图中心位置
var latlng=新的google.maps.latlng（latcenter，longcenter）；
//为每个标记创建pinShadow
var pinShadow=new google.maps.MarkerImage（“http://chart.apis.google.com        /图表？chst=d_贴图_pin_阴影“，
新谷歌地图大小（40,37），
新的google.maps.Point（0,0），
新的google.maps.Point（12,35））；
//函数创建动态标记
功能图像（一）{
return image=new google.maps.MarkerImage（“http://www.googlemapsmarkers.com/v1/“+i+”/“+pinColor+”/”，新的google.maps.Size（21,34），新的google.maps.Point（0,0），新的google.maps.Point（10,34））；
}
//加载页面后要运行的函数
函数初始化（）{
var geocoder=new google.maps.geocoder（）；
//为谷歌地图设置默认设置
变量设置={
缩放：3，
中心：拉特林，
mapTypeControl:true，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
导航控制：对，
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}，
mapTypeId:google.maps.mapTypeId.ROADMAP}；
//启动谷歌地图并将其分配给网站上的div
var map=new google.maps.map（document.getElementById（“map_canvas”），设置）；
//循环遍历数组中的地址总数
对于（var i=0；i

理想的输出类似于下图，每个结果都有一个命名的标记，其位置由其在地图上的关联标记显示。我需要标记的字母顺序，而不是编号也基于坐标，而不是地址

---

编辑：更改代码段以从chart.api.google.com获取标记图像。（我不知道谷歌地图营销网站为什么停止工作）

您可以从标记获取url，并将其显示为图像。下面是一段代码片段来说明：

#地图画布，
#标记容器{
宽度：50%；
高度：600px；
边际：0px；
填充：0px；
浮动：左；
}
.标记说明{
左侧填充：40px；
}
.地点{
左侧填充：10px；
}
.马克{
显示：内联块；
宽度：21px；
高度：35px；
}
var映射；
var标记=[]；
var pinColor=“FE7569”；
//函数创建动态标记
函数pinImage（imagenum）{
//应该检查超过32个引脚。。。
var ch='A'
var makerLetter=String.fromCharCode（ch.charCodeAt（0）+imagenum）；
return image=new google.maps.MarkerImage（“http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=“+makerLetter+”|“+pinColor）；
}
函数初始化（）{
var newYork=newgoogle.maps.LatLng（40.7773514，-73.9554338）；
变量映射选项={
缩放：13，
中心：纽约，
disableDefaultUI:true，
mapTypeControlOptions:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var请求={
地点：纽约，
半径：5000，
类型：['store']
};
var service=newgoogle.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
}
函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
for（var i=0，marker；marker=markers[i]；i++）{
marker.setMap（空）；
}
标记=[]；
$（“#标记容器”）.empty（）；
对于（i=0；i

听起来你想在pin中输入字母而不是数字：

// Function to create the dynamic marker
function pinImage(i) {
    var letter = String.fromCharCode(i + 65);  // 'A' is 65.
    return new google.maps.MarkerImage(
        "http://www.googlemapsmarkers.com/v1/" + letter + "/" + pinColor + "/",
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
}

此外，您还需要创建跟踪每个标记的地址、latlng和索引的对象。我建议您使用

map.data

来执行此操作

---

哪个部分不工作？JSP或Javascript部分？@Jeroen我不知道如何在每个产品名称旁边添加标记

var addresses = ['New York', 'San Francisco'];
addresses.forEach(function(address, i) {
    // Create a feature.
    var feature = map.data.add({
        'id': i,
        'properties': {'address': address}
    });

    // Display the feature in the list.
    $('.address-list').append($('<div>')
        .append($('<img>').attr('src', pinImage(i)))
        .append($('<div>').text(address)));
    // Do more fancy things here

    // Geocode the feature and position it on the map.
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            feature.setGeometry(results[0].geometry.location);
            if (i == 0) {
                map.setCenter(results[0].geometry.location);
            }
        }
    });
});

map.data.setStyle(function(feature) {
    return {
        title: feature.getProperty('address'),
        zIndex: feature.getId(),
        icon: pinImage(feature.getId()),
        shadow: pinShadow
    };
});