Как добавить несколько интерактивных DIV на Google Map - это изменение размера при наведении

Question

У меня есть карта Google с несколькими маркерами, прикрепленными к физическим местам.

Вместо стандартного маркера карты я хочу использовать круги, которые расширяются с пользовательским содержимым при наведении.

Пример макета на 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 Maps? Я посмотрел на маркеры и наложения, но все еще не уверен, что будет работать лучше.

Answer 1

Одним из вариантов будет использование библиотеки RichMarker , в которой элемент 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')
});

подтверждение концепции скрипта

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>