JSFiddle - React, Tailwind, and code Playground

by Nico

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script>
    <div id="map"></div>
    
    <div id="log"></div>
    <div id="content">
      <button id="toggle-draggable">Toggle Draggable</button>
      <button id="toggle-map">Toggle Map</button>
      <button id="toggle-anchor">Toggle Anchor</button>
      <button id="toggle-flat">Toggle Flat</button>
      <button id="toggle-visible">Toggle Visible</button>
         <button id="toggle-info">Toggle info</button>
    </div>
    <textarea id="marker-content">
      <div id="svg-marker">
          <div class="info"></div>
        </div>
    </textarea>
    <button id="set-content">Set marker html</button>

CSS

#map, #map2 {
        width: 600px;
        height: 400px;
        float: left;
        margin: 0 5px;
      }
      .my-marker {
        background: red;
        border: 2px solid #fff;
        padding: 3px;
      }
      .my-other-marker {
        background: blue;
        border: 2px solid #fff;
        padding: 3px;
      }
#svg-marker {
    background: transparent url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M9.5%2019c0%203.59%202.91%206.5%206.5%206.5s6.5-2.91%206.5-6.5-2.91-6.5-6.5-6.5-6.5%202.91-6.5%206.5zM30%208h-7c-0.5-2-1-4-3-4h-8c-2%200-2.5%202-3%204h-7c-1.1%200-2%200.9-2%202v18c0%201.1%200.9%202%202%202h28c1.1%200%202-0.9%202-2v-18c0-1.1-0.9-2-2-2zM16%2027.875c-4.902%200-8.875-3.973-8.875-8.875s3.973-8.875%208.875-8.875c4.902%200%208.875%203.973%208.875%208.875s-3.973%208.875-8.875%208.875zM30%2014h-4v-2h4v2z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 50% 50%;
    background-size:contain;
    width:30px;
    height:30px;
    color:#666;
}
.info{
    position:relative;
    top:-20px;
    left:5px;
}
      #log {
        clear: both;
      }
      #content {
        padding-left: 5px;
      }
      #marker-content {
        width: 350px;
        height: 150px;
      }

JavaScript

var map, map2;
      var marker, marker2;

      function init() {
        var mapCenter = new google.maps.LatLng(49.009568,8.404074);
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 1,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        //map2 = new google.maps.Map(document.getElementById('map2'), {
        //  zoom: 1,
        //  center: mapCenter,
        //  mapTypeId: google.maps.MapTypeId.TERRAIN
        //});
        marker = new RichMarker({
          position: mapCenter,
          map: map,
          draggable: true,
          content: 'ddd'
          });
        var div = document.createElement('DIV');
        div.innerHTML = '<div class="my-other-marker">I am flat marker!</div>';
        marker2 = new RichMarker({
          map: map,
          position: new google.maps.LatLng(30, 50),
          draggable: true,
          flat: true,
          anchor: RichMarkerPosition.MIDDLE,
          content: div
        });
        google.maps.event.addListener(marker, 'position_changed', function() {
          log('Marker position: ' + marker.getPosition());
        });
        var count = 1;
        google.maps.event.addListener(marker, 'click', function() {
          log('Marker clicked: ' + count++);
        });
        google.maps.event.addDomListener(document.getElementById('set-content'),
          'click', function() {
          setMarkerContent();
        });
       
        google.maps.event.addDomListener(document.getElementById('toggle-anchor'),
          'click', function() {
          toggleAnchor();
        });
        google.maps.event.addDomListener(document.getElementById('toggle-flat'),
          'click', function() {
          toggleFlat();
        });
        google.maps.event.addDomListener(document.getElementById('toggle-visible'),
          'click', function() {
          toggleVisible();
        });
       ...