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>
JavaScript
var map;
// Update
var btn1=document.createElement('div');
btn1.id="c_placemark_b";
var btn2=document.createElement('div');
btn2.id="c_line_b";
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";
}
}
// Update
gMap.Feature.prototype.line = function() {
gMap.select('line_b');
btn1.className="unselected";
btn2.className="selected";
}
// Update
gMap.Feature.prototype.placemark = function() {
gMap.select("placemark_b");
btn2.className="unselected";
btn1.className="selected";
}
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");
// Update
var controlDiv = document.createElement('div');
var table=document.createElement('TABLE');
var tbdy=document.createElement('TBODY');
var tr=document.createElement('TR');
var td1=document.createElement('TD');
td1.appendChild(btn1);
var td2=document.createElement('TD');
td2.appendChild(btn2);
tr.appendChild(td1);
tr.appendChild(td2);
tbdy.appendChild(tr);
table.appendChild(tbdy);
controlDiv.appendChild(table);
google.maps.event.addDomListener(btn1, 'click', function() {
btn2.className="unselected";
gMap.initFeature('placemark');
this.className="selected";
...