JSFiddle - React, Tailwind, and code Playground

HTML

<summary>Basemap</summary>
<div class="group">
  <p>Select a Map Style:</p>
  <p>
    <label><input type="radio" name="basemapStyle" id="basemapStyle1" value="Satellite" checked /> Satellite</label>
    <label><input type="radio" name="basemapStyle" id="basemapStyle2" value="Roadmap"/> Roadmap</label>
    <label><input type="radio" name="basemapStyle" id="basemapStyle3" value="Hybrid" /> Hybrid</label>
    <label><input type="radio" name="basemapStyle" id="basemapStyle4" value="Terrain" /> Terrain</label>
  </p>
</div>

JavaScript

// Specify all radio buttons by their 'Unique ID'
var bmStyle1 = document.getElementById("basemapStyle1");
var bmStyle2 = document.getElementById("basemapStyle2");
var bmStyle3 = document.getElementById("basemapStyle3");
var bmStyle4 = document.getElementById("basemapStyle4");

var basemapStyleArray = [bmStyle1, bmStyle2, bmStyle3, bmStyle4];

// Declared outside
var basemapStyle;

window.onload = () => {
  // Event handler
  function clickHandler(e) {
    basemapStyle = "&maptype=" + e.target.value.toLowerCase() + "&scale=4&format=png32&key=xxxx";
  }

  // Attach Event Handlers
  basemapStyleArray.forEach(el => {
    el.onclick = clickHandler;
  });
}

window.onchange = () => {
  console.log(basemapStyle);
}