如何在谷歌地图上显示项目，类似于谷歌显示其结果的方式

Question

我需要显示带有多个标记的地图，我发现 this question 有我要查找的内容，但问题是我需要在其旁边显示每个项目的标记。

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

我也查了this question的答案，但没有太大帮助。

谷歌地图代码

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)

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

Answer 1

听起来你想要在你的 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));
}

此外，您需要创建跟踪每个标记的地址、纬度和索引的对象。我建议您使用map.data 来执行此操作。 https://developers.google.com/maps/documentation/javascript/reference#Data

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
    };
});

Answer 2

编辑：更改了 sn-p 以从 chart.apis.google.com 获取标记图像。 （我不确定为什么 googlemapsmarkers.com 停止工作）。

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

<!DOCTYPE html>

<head lang="en">
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
  <style>
    #map-canvas,
    #marker-container {
      width: 50%;
      height: 600px;
      margin: 0px;
      padding: 0px;
      float: left;
    }
    .marker-description {
      padding-left: 40px;
    }
    .place {
      padding-left: 10px;
    }
    .marker {
      display: inline-block;
      width: 21px;
      height: 35px;
    }
  </style>
</head>

<body>
  <div id="map-canvas"></div>
  <div id="marker-container"></div>
  <script>
    var map;
    var markers = [];
    var pinColor = "FE7569";

     // Function to create the dynamic marker
    function pinImage(imagenum) {
      // should check for more than 32 pins...
      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);
    }

    function initialize() {

      var newYork = new google.maps.LatLng(40.7773514, -73.9554338);
      var mapOptions = {
        zoom: 13,
        center: newYork,
        disableDefaultUI: true,
        mapTypeControlOptions: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var request = {
        location: newYork,
        radius: 5000,
        types: ['store']
      };
      var service = new google.maps.places.PlacesService(map);
      service.nearbySearch(request, callback);
    }

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0, marker; marker = markers[i]; i++) {
          marker.setMap(null);
        }
        markers = [];
        $("#marker-container").empty();
        for (i = 0; i < results.length; i++) {
          var place = results[i];
          var placeLoc = place.geometry.location;
          // Create a marker for each place.
          var marker = new google.maps.Marker({
            map: map,
            title: place.name,
            position: place.geometry.location,
            icon: pinImage(i)
          });

          markers.push(marker);
          var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>" + place.name + "</span>");
          $("#marker-container").append(description);
        }
      }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</body>

</html>