谷歌地图：如何制作像 Airbnb 这样的自定义标记？答案

【问题标题】：Google Maps: How to make custom markes like Airbnb?谷歌地图：如何制作像 Airbnb 这样的自定义标记？
【发布时间】：2016-07-08 15:19:27
【问题描述】：

我想用 Airbnb 等自定义标记制作地图：

即带有价格数字和方形外观的标记。代码是这样的：

<div class="map-marker" style="position: absolute; overflow: hidden; opacity: 0.01; margin-left: 0px; margin-top: 0px; left: 267px; top: 237px; z-index: 238; display: block; cursor: pointer;" onselectstart="return false;" ondragstart="return false;" title="">
  <div class="tooltip tooltip-bottom-middle tooltip-layout tooltip-primary">
    <div class="price-marker__label">
      <div class="price-label">
        <sup class="currency-prefix">$</sup>
        <span class="price-amount">108</span>
      </div>
    </div>
  </div>
</div>

我认为这很容易。定义一个自定义的 html 标记组件，将它的坐标传递给谷歌地图，它就会在那里。

但它似乎比这更复杂。

我找到Custom Google Map Marker like in Trulia map。这与我的问题非常相似。但是MarkwithLable 现在不可用。

我可以在 Google API 文档中找到 https://developers.google.com/maps/documentation/javascript/examples/marker-labels 。这只是一个带有标签的简单标记。而且我没有看到任何自定义 HTML 组件传入。

更新：

我想 RichMarker(https://github.com/googlemaps/js-rich-marker)，也许我在找什么？

【问题讨论】：

我想做同样的事情，但这个 Rich Marker 库不再受支持。你能让它工作吗？

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您可以设置自定义标记类型，然后根据需要分配它们....

你解决过/this/吗？

https://developers.google.com/maps/documentation/javascript/tutorials/custom-markers

【讨论】：

完全错过了本教程，这非常有帮助。
确实，它应该可以满足您的需求。