Using HTML custom markers opens a world of possibilities, since you can use your own code to create the marker you need. Below is an example of a custom HTML marker that displays the marker title, adds some background and a cool hover effect.

You can create a template, using placeholders, that will display as the markers.

In the example above we used the following template:

<div class="itt_globe_html_marker pulsating_marker">{title}</div>

This template uses the {title} placeholder and some custom css classes.

We then added this custom css to our site:

/* Pulsating Marker */
.pulsating_marker {
  
  background-color: orange;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.8);
  cursor: pointer;
  overflow: visible;
}

.pulsating_marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: orange;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: none;
}

.pulsating_marker:hover::after {
  animation: shockwave 1s ease-out infinite;
}

@keyframes shockwave {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0.6;
  }
  100% {
    width: 250%;
    height: 250%;
    opacity: 0;
  }
}

This is just an example of what you can do with custom HTML Markers.

Limitations

• You won’t be able to use the automatic tooltip feature. You will need to implement your own tooltip solution if needed.
• Depending on how you add your custom css to your site, you might not see the real HTML style in the administration preview.