JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<body>
    <div id="map_canvas"></div>
  <table><tr>
  <td><div id="hand_b" onclick="gMap.stopEditing()" /></td>
  <td><div id="placemark_b" onclick="gMap.initFeature('placemark')" /></td>
  <td><div id="line_b" onclick="gMap.initFeature('line')" /></td>
  <td><div id="road_b" onclick="gMap.initFeature('road')" /></td>
  </tr></table>
</body>

CSS

#map_canvas{width: 500px; height: 400px;}

body {
  font-family: Arial, sans serif;
  font-size: 11px;
}
#hand_b {
  width:31px;
  height:31px;
  background-image: url(http://google.com/mapfiles/ms/t/Bsu.png);
}
#hand_b.selected {
  background-image: url(http://google.com/mapfiles/ms/t/Bsd.png);
}

#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);
}

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

JavaScript

var mapInstance;

var gMap = {
    currentFeature: null,
    mapListener: null,

    polyMarkers: [],
    roadMarkers: [],
    singleMarkers: [],
    
    lastRoadBool: false,
    lastMarkerBool: false,
    lastPolyBool: false,

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

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

    buttons: {
        $hand: null,
        $line: null,
        $placemark: null,
        $road: null
    },

    select: function(buttonId) {
        gMap.buttons.$hand.className = "unselected";
        gMap.buttons.$line.className = "unselected";
        gMap.buttons.$placemark.className = "unselected";
        gMap.buttons.$road.className = "unselected";

        document.getElementById(buttonId).className = "selected";
    },

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

    stopEditing: function() {
        gMap.select("hand_b");
    },

    addPolyMarker: function(latLng) {
        gMap.lastPolyBool = true;

        var marker = gMap.createMarker(latLng);
        this.polyMarkers.push(marker);

        var path = this.polyLine.getPath();
        path.push(latLng);
    },

    createMarker: function(latlng) {
        var marker = (new google.maps.Marker({
            position: latlng,
            map: mapInstance,
            draggable: false
        }));
        google.maps.event.addListener(marker, 'click', function(e) {
            console.log(marker.getPosition());
        });
        return marker;
    }
}

gMap.Feature.prototype.placemark = function() {
    var marker; // , self = this;
    if (gMap.isSelected(gMap.buttons.$placemark)) return;
    gMap.select("placemark_b");

    if ( !! gMap.mapListener) google.maps.event.removeListener(gMap.mapListener);

    var listener = google.maps.event.addListener(mapInstance, "click", function(arg) {
        if (arg && arg.latLng) {
            gMap.select("hand_b");
           ...