Expanding Map Markers Mockup

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;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>

CSS

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;
}

JavaScript

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);