Google Maps Info Windows (попап текст)

let map, googleMarkers = {} // карта и объект содержащий объекты гугл маркеров 
const radios = document.querySelectorAll('input[type=radio][data-marker]') 
const myMarkers = { // описание маркеров 
  car: { 
    'Title 1': [52.4357808, 4.991315699999973], 
  }, 
  second: { // имя группы 
    options: { // опции для маркеров этой группы 
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'  
    },  
    'Title 2': [52.4357808, 4.981315699999973], 
    'Title 3': [52.4555687, 5.039231599999994], 
  }, 
  third: { 
    options: {  
      icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', 
      animation: google.maps.Animation.BOUNCE 
    }, 
    'Title 4': [52.4755687, 5.019261599999994], 
    'Title 5': [52.4555687, 5.049231599999994], 
    'Title 6': [52.4055687, 5.039236599999994] 
  } 
} 
 
initMap() 
// для каждой радио-кнопки добавляет слушатель события клика 
radios.forEach(i => i.addEventListener('click', radioClick)) 
 
 
function initMap() { 
  const center = new google.maps.LatLng(52.4527808, 4.991315699999973) 
  const mapOptions = { 
    zoom: 11, 
    center, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
  } 
 
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions) 
  setMarkers(map) 
} 
 
function setMarkers (map) { 
  let isFirst = true 
  for (let group in myMarkers) { 
    for (let title in myMarkers[group]) { 
      if (title === 'options') // не берет во внимание опции 
        continue 
    
      const myMarker = myMarkers[group][title] 
      const visible = document.querySelector(`input[type=radio][data-marker=${group}]`).checked 
      const marker = new google.maps.Marker({ 
        title, 
        position: {lat: myMarker[0], lng: myMarker[1]}, 
        map, 
        visible, 
        ...myMarkers[group].options // берет опции группы 
      }) 
       
      googleMarkers[group] = googleMarkers[group] || [] // создает массив если его нет 
      googleMarkers[group].push(marker) 
    } 
  } 
} 
 
function radioClick ({ target }) { // берет target события 
  const group = target.dataset.marker // id группы к которой принадлежит радио-кнопка 
  const arrOfEveryGroup = Object.values(googleMarkers) // массив массивов групп маркеров 
  const everyMarker = [].concat.apply([], arrOfEveryGroup) // массив всех маркеров 
   
  if (group === 'showall') { 
    // показывает всех 
    everyMarker.forEach(i => i.setVisible(true)) 
    return 
  } 
  // те кто был видимым становиться не видемым 
  everyMarker.forEach(i => i.visible && i.setVisible(false)) 
   
  // показывает группу к которой принадлежит радио-кнопка 
  for (let marker of googleMarkers[group]) 
    marker.setVisible(!marker.visible) 
}

#map-canvas {  
  height: 160px; 
  width: 100%; 
} 
#map-canvas img { 
  max-width: none; 
} 
     
#map-canvas div { 
  -webkit-transform: translate3d(0, 0, 0); 
}

<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
 
<div id="map-canvas" ></div> 
 
 
<input data-marker="car" id="car" type="radio" name="myMarkers"> 
<label for="car">car</label> 
 
<input data-marker="second" id="second" type="radio" name="myMarkers" checked> 
<label for="second">second</label> 
 
<input data-marker="third" id="third" type="radio" name="myMarkers"> 
<label for="third">third</label> 
 
<input data-marker="showall" id="showall" type="radio" name="myMarkers"> 
<label for="showall">Показать все</label>