JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  </head>
  <body>
    <div id="map" style="width: 300px; height: 300px"></div>
    <table><tr>
      <td><div id="placemark_b" onclick="gMap.initFeature('placemark')"/></td>
      <td><div id="line_b" onclick="gMap.initFeature('line')"/></td>
    </tr></table>
    <script type="text/javascript">
      initialize();
    </script>
  </body>
</html>

CSS

#placemark_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Bmu.png);
}
#placemark_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bmd.png);
}

#line_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Blu.png);
}
#line_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bld.png);
}

#c_placemark_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Bmu.png);
}
#c_placemark_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bmd.png);
}

#c_line_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Blu.png);
}
#c_line_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bld.png);
}

JavaScript

var map;

var gMap = {
    buttons: {
        $line: null,
        $placemark: null
    },

    Feature: function(type){
        this[type]();
    },

    initFeature: function(type){
        new gMap.Feature(type);
    },

    isSelected: function(el){
       return (el.className == "selected"); 
    },

    select: function (buttonId){
        gMap.buttons.$line.className="unselected";
        gMap.buttons.$placemark.className="unselected";
        document.getElementById(buttonId).className="selected";
        var divs=window.parent.frames[0].document.getElementsByTagName('div');
          for(i=0;i<divs.length;i++)
          {
            if(divs[i].id.charAt(0)=="c") divs[i].className="unselected";
          }
        var btn='c_'+buttonId;
            window.parent.frames[0].document.getElementById(btn).className="selected";
    }
}

gMap.Feature.prototype.line = function() {
    gMap.select('line_b');
}

gMap.Feature.prototype.placemark = function() {
    gMap.select("placemark_b"); 
}

function initialize() {
    map = new google.maps.Map(document.getElementById('map'));
    map.setCenter(new google.maps.LatLng(48.77565,9.181802));
    map.setZoom(12);
    map.setMapTypeId( google.maps.MapTypeId.ROADMAP );

    gMap.buttons.$line = document.getElementById("line_b");
    gMap.buttons.$placemark = document.getElementById("placemark_b");

    var controlDiv = document.createElement('div');
    controlDiv.innerHTML = '<table><tr><td><div id="c_placemark_b" onclick="gMap.initFeature(\'placemark\')"/></td><td><div id="c_line_b" onclick="gMap.initFeature(\'line\')"/></td></tr></table>';

    //gMap.buttons.$c_line = controlDiv.getElementById("c_placemark_b");
    //gMap.buttons.$c_placemark = controlDiv.getElementById("c_line_b");

    controlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
}