In this example below you will see how to do a SingleDivMapMarkers with some HTML / CSS and Javascript

This awesome code was written by andydietz, you can see more from this user in the personal repository.
You can find the original code on
Copyright andydietz ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">



  <div class="wrapper">
  <div class="item"><div class="marker marker-general"></div></div>  
  <div class="item"><div class="marker marker-specialty"></div></div>  
  <div class="item">
<div class="cluster">



/*Downloaded from */
.wrapper {
  width: 300px;
  margin: 50px auto;
  display: flex;
  flex-direction: row;

.item {
  position: relative;
  flex: 1 1 auto;

.marker-general {
  background: blue;

.marker-specialty {
  background: orange;

.marker {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0%;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
.marker:after {
  content: '';
  width: 14px;
  height: 14px;
  margin: 8px 0 0 8px;
  background: white;
  position: absolute;
  border-radius: 50%;