JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>
<script src="//cdn.jsdelivr.net/gmap3/5.0b/gmap3.min.js"></script>
<div id="map"></div>

CSS

body {
    padding:10px;
}
#map {
    width:100%;
    height:200px;
    border:1px solid #ccc;
}

JavaScript

(function ($) {
    $(function () {
        var Map = $('#map');
        Map.init = function (data) {
            Map.postData = data;
            Map.gmap3({
                map: {
                    options: {
                        center: [13.752222, 100.493889],
                        zoom: 4
                    }
                },
                marker: {
                    values: [
                        {id: 1, address:"Lopburi",   tag:['A'], options:{
                          icon: '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|374D7E|FFFFFF'
  
                        }},
                        {id: 2, address:"Koh Samui", tag:['B'], options:{
                          icon: '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|374D7E|FFFFFF'
                        }},
                        {id: 3, address:"Chaingmai", tag:['C'], options:{
                          icon: '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|374D7E|FFFFFF'
                        }}
                    ],
                    options: {
                        draggable: false
                    },
                    events: {
                        click: function (marker, event, context) {
                             
                            var currentMarker = Map.currentMarker || false;
 
                            if( currentMarker ){
                                currentMarker.setOptions({
                                    icon: currentMarker.icon.replace('|FFFFFF|000000','|374D7E|FFFFFF')
                                });
                            }                         
                          
                          var letter = context.tag[0];
                          marker.setOptions({
                             icon : '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + letter +...