添加动态内容到谷歌地图标记(Adding dynamic content to Google Map

我想创建一个谷歌地图自定义图标标记。我需要能够动态文本添加到实际的标记。换句话说反正是有增加一个div？我需要从XML添加到实际标记的价格。我希望这是有道理的。任何帮助，将不胜感激，或者如果任何人都可以在正确的方向指向我。谢谢！

MY JQUERY：

function addMarker() {
    for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker
        var lat = parseFloat(markers[i][0]);
        var lng = parseFloat(markers[i][1]);
        var trailhead_name = markers[i][2];

        var myLatlng = new google.maps.LatLng(lat, lng);

        var contentString = "<html><body><div class='mapPopup'><div class='mapPopIn'>" + trailhead_name + "</div></div></body></html>";
        var image = 'images/map-marker.png';
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Click for more information",
            icon: image
        });

我试图修改实际的映射是： http://travellinginmexico.com/hotels_map.php?c=cancun

Answer 1:

有两种选择，信息框和MarkerWithLabel 。我喜欢MarkerWithlabel，因为它更轻，更便于使用。它的缺点是我无法弄清楚如何创建完毕后更换Markerwithlabel的文本。你可以用信息框做，因为你确实需要创建一个div。

我给与JavaScript的静态数据，你可以用XML数据替换的例子。您还需要样式化MarkerWithLabel适合你的图标。例如，labelStyle：顶部将改变垂直偏移。

http://jsfiddle.net/RAH6G/点击“不是真的Ajax”的按钮。

 function createMarker(position, label) {
   return new MarkerWithLabel({
   position: position,
   draggable: false,
   map: map,
   labelText: label,
   labelClass: "labels", // the CSS class for the label
   labelStyle: {top: "0px", left: "-21px", opacity: 0.75},
   labelVisible: true
   });
 }

 var readData = function() { // create markers
  pos = [
  new google.maps.LatLng(40, -85),
  new google.maps.LatLng(42, -92),
  new google.maps.LatLng(36, -100),
  new google.maps.LatLng(39, -112)
  ];

  label = ["$200", "99pts.", "US$30", "US$999"];
  for (var i = 0; i < pos.length; i++) {
    createMarker(pos[i], label[i]);
  }     
 }

Answer 2:

我知道这是一个较旧的线程，但我有一个非常类似的问题（试图更新MarkerWithLabel创建标记的标签内容），并用了一段时间，我找到一个解决方案。

创建MarkerWithLabel标记：

marker = new MarkerWithLabel({
  position: googlemapslatlng,
  icon: url-to-icon,
  map: map,
  title: "Marker Title",
  labelContent: content,
  labelClass: marker_shade
});

然后，你可以使用更新标签：

marker.labelClass = marker_shade_updated;
marker.labelContent = marker_content_updated;
marker.label.setStyles(); // Force the marker label to redraw

希望这可以帮助。

文章来源: Adding dynamic content to Google Maps marker