使用Google Maps Javascript API添加标记，使其外观与在maps.google.com中添加的标记完全相同

Question

我正在尝试使用Google Maps Javascript API将地图添加到我的网站。我希望它看起来完全像使用maps.google.com创建的地图：

但是我不能达到这个结果，仅仅是这样：

所以我的问题是：如何在标记的底部添加红点，以及如何使标题以粗体显示在该点的右侧？

这是我的代码：

function initMap() {
    var coordinates = { lat: 40.785845, lng: -74.020496 };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: coordinates,
        scrollwheel: false
    });
    var marker = new google.maps.Marker({
        position: coordinates,
        map: map,
        label: "5409 Madison St"
    });
  }

Answer 1

要自定义标签文本，请参阅markerLabel匿名对象的文档。要控制标签的位置，您需要使用IconlabelOrigin属性。

var marker = new google.maps.Marker({
  position: coordinates,
  map: map,
  icon: {
    url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
    labelOrigin: new google.maps.Point(75, 32),
    size: new google.maps.Size(32,32),
    anchor: new google.maps.Point(16,32)
  },
  label: {
    text: "5409 Madison St",
    color: "#C70E20",
    fontWeight: "bold"
  }
});

要在标记的底部添加“红点”（“麻疹”），最简单的方法是在同一位置创建另一个标记（尽管您可以为标记创建一个既包含麻疹又包含默认红色的图标“气泡”标记）。

var measle = new google.maps.Marker({
  position: coordinates,
  map: map,
  icon: {
    url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
    size: new google.maps.Size(7, 7),
    anchor: new google.maps.Point(4, 4)
  }
});

概念证明

代码段：

var marker = new google.maps.Marker({
  position: coordinates,
  map: map,
  icon: {
    url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
    labelOrigin: new google.maps.Point(75, 32),
    size: new google.maps.Size(32,32),
    anchor: new google.maps.Point(16,32)
  },
  label: {
    text: "5409 Madison St",
    color: "#C70E20",
    fontWeight: "bold"
  }
});

var measle = new google.maps.Marker({
  position: coordinates,
  map: map,
  icon: {
    url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
    size: new google.maps.Size(7, 7),
    anchor: new google.maps.Point(4, 4)
  }
});

function initMap() {
  var coordinates = {
    lat: 40.785845,
    lng: -74.020496
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: coordinates,
    scrollwheel: false
  });
  var measle = new google.maps.Marker({
    position: coordinates,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.8, 3.8)
    }
  });
  var marker = new google.maps.Marker({
    position: coordinates,
    map: map,
    icon: {
      url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
      labelOrigin: new google.maps.Point(75, 32),
      size: new google.maps.Size(32, 32),
      anchor: new google.maps.Point(16, 32)
    },
    label: {
      text: "5409 Madison St",
      color: "#C70E20",
      fontWeight: "bold"
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);