如何将多个交互式DIV添加到Google地图 - 在鼠标悬停时更改大小

Question

我有一个谷歌地图上有多个标记贴在物理位置上。

我希望使用在悬停时使用自定义内容展开的圆圈，而不是标准地图标记。

JSFiddle上的模拟示例：https://jsfiddle.net/BaronGrivet/b52bdyt4/

<div class="expanding-marker marker-1">
    <img src="https://picsum.photos/200/100?0" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
 </div>

.expanding-marker {
  border: red 5px solid;
  border-radius: 25px;
  overflow: hidden;
  height: 0px;
  width: 0px;
  margin: 0;
  position: absolute;
  transition: 2s all;
  z-index: 0;
  background-color: #fff;
}

.expanding-marker:hover {
  margin-left: -100px;
  margin-top: -100px;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  z-index: 9;
}

在Google地图中执行此操作的最佳方法是什么？我看过标记＆amp;覆盖，但仍然不确定什么是最好的。

Answer 1

一种选择是使用RichMarker library，将DOM元素放在标记中：

marker = new RichMarker({
  position: map.getCenter(),
  map: map,
  draggable: true,
  content: document.getElementById('mrkr1')
});
marker2 = new RichMarker({
  position: new google.maps.LatLng(37.3860517, -122.0838511),
  map: map,
  draggable: true,
  content: document.getElementById('mrkr2')
});

proof of concept fiddle

function initMap() {
  var lng;
  var lat;
  var my_loc = new google.maps.LatLng(37.4419, -122.1419);
  map = new google.maps.Map(document.getElementById('map'), {
    center: my_loc,
    zoom: 10
  });
  marker = new RichMarker({
    position: map.getCenter(),
    map: map,
    draggable: true,
    content: document.getElementById('mrkr1')
  });
  marker2 = new RichMarker({
    position: new google.maps.LatLng(37.3860517, -122.0838511),
    map: map,
    draggable: true,
    content: document.getElementById('mrkr2')
  });
  /* 
  var div = document.createElement('DIV');
    div.innerHTML = '<div class="my-other-marker">I am flat marker!</div>';

    marker3 = new RichMarker({
      map: map,
      position: map.getCenter(),
      draggable: true,
      flat: true,
      anchor: RichMarkerPosition.MIDDLE,
      content: div
    });
  */
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.container {}

.expanding-marker {
  border: red 5px solid;
  border-radius: 25px;
  overflow: hidden;
  height: 0px;
  width: 0px;
  margin: 0;
  position: absolute;
  transition: 2s all;
  z-index: 0;
  background-color: #fff;
}

.expanding-marker:hover {
  margin-left: -100px;
  margin-top: -100px;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  z-index: 9;
}

.expanding-marker p {
  margin: 10px;
}

.marker-1 {
  left: 0px;
  top: 0px;
}

.marker-2 {
  left: 0px;
  top: 0px;
}

.my-other-marker {
  background: blue;
  border: 2px solid #fff;
  padding: 3px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script>
<div id="map"></div>
<div class="container">
  <div id="mrkr1" class="expanding-marker marker-1">
    <img src="https://picsum.photos/200/100?0" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>

  <div id="mrkr2" class="expanding-marker marker-2">
    <img src="https://picsum.photos/200/100?1" />
    <p>
      Sed vitae pretium justo. Nulla venenatis pretium dui ut placerat.
    </p>
  </div>

  <div class="expanding-marker marker-3">
    <img src="https://picsum.photos/200/100?2" />
    <p>
      Quisque hendrerit, risus vitae ullamcorper consectetur, sapien magna sodales sem,
    </p>
  </div>

</div>