用于google maps API标记筛选的单选按钮下拉菜单

Question

所以我找到了一段代码，当你从下拉菜单中选择标记时，它让你过滤标记，如果我从下拉菜单中取出单选按钮，然后单击它们，这段代码实际上起作用，但是如果我把它们放回一个下拉菜单中，它不会过滤标记，它只是保持原样。我希望它们的工作方式是这样的--如果我从下拉列表中选择Ryga，则只显示将其作为标记的标记[4]。

null

js lang-js prettyprint-override">var gmarkers1 = [];
var markers1 = [];

var icon1 = "assets/img/googlemapsmarker.svg";
var icon2 = "assets/img/googlemapsmarker2.svg";


markers1 = [
  ['0', '<div id="infowindow"> <img class = "img_smaller_mobile" src = "assets/img/PurchLogo.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">Purch restaurant</h3><p>[phone]</br>Dzelzavas iela 51A, Rīga</p></div></div>', 56.9569506, 24.1892936, ['Rīga', 'Ēdināšana']],
  ['1', '<div id="infowindow"> <img src = "assets/img/KurtsLogo.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">Kurts coffee</h3><p>[phone]</br>Tērbatas iela 2i, Rīga</p></div></div>', 56.952127, 24.116603, ['Rīga', 'Ēdināšana']],
  ['2', '<div id="infowindow"> <img class = "img_smaller_mobile" src = "assets/img/KurtsLogo.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">Kurts coffee</h3><p>[phone]</br>Cēsu iela 20, Rīga</p></div></div>', 56.9651915, 24.1405323, ['Rīga', 'Ēdināšana']],
  ['3', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 56.95051, 24.11203, ['Rīga', 'Drive-Thru']],
  ['4', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 56.9606, 24.1754, ['Rīga', 'Skaistumkopšana']],
  ['5', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 56.9535, 24.1180, ['Rīga', 'Skaistumkopšana']],
  ['6', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 56.98, 24.1754, ['Rīga', 'Izklaide']],
  ['7', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 56.9680, 24.1750, ['Rīga', 'Izklaide']],
];

var markerCallback = function() {
  for (var i = 0; i < gmarkers1.length; i++) {
    gmarkers1[i].setIcon(icon1);
  }
  this.setIcon(icon2);

}




function initMap() {

  var center = new google.maps.LatLng(56.95051, 24.11203);

  // Added a variable for map center

  var mapOptions = {
    zoom: 13,
    center: center,
    mapId: "e24b393c59b842b4",
    disableDefaultUI: true,
    gestureHandling: 'greedy',
    scrollwheel: false,
  };

  //Customization of the map itself



  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);
  }

  // Initialized the map in #map-canvas, added markers from an array




  infowindow = new google.maps.InfoWindow({
    content: '',

  });

}


// Function to add markers to map
function addMarker(marker) {

  console.log("Add marker", marker)
  var category = marker[4];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

  var marker1 = new google.maps.Marker({
    position: pos,
    category: category,
    map: map,
    icon: icon1,

  });

  gmarkers1.push(marker1);





  // Marker click listener (zoom in and open info window)


  google.maps.event.addListener(marker1, 'click', markerCallback);




  google.maps.event.addListener(marker1, "click", (function(marker1, content) {
    return function() {
      console.log("Gmarker 1 gets pushed");

      infowindow.setContent(content);
      infowindow.open(map, marker1);






    };
  })(marker1, content));


  $(document).ready(function() {
    // This will fire when document is ready:
    $(window).resize(function() {
      // This will fire each time the window is resized:
      if ($(window).width() >= 768) {
        // if larger or equal
        infowindow.set("pixelOffset", new google.maps.Size(250, 100));
      } else if ($(window).width() >= 576) {
        // if smaller

        infowindow.set("pixelOffset", new google.maps.Size(150, 235));

      } else {
        infowindow.set("pixelOffset", new google.maps.Size(100, 250));
      }
    }).resize(); // This will simulate a resize to trigger the initial run.
  });




  google.maps.event.addListener(map, "click", function(event) {
    infowindow.close();
    marker1.setIcon(icon1)


  });

}

// Function on Change of checkbox
updateView = function(element) {
  var bounds = new google.maps.LatLngBounds();
  if (element) {
    //Get array with names of the checked boxes
    checkedBoxes = ([...document.querySelectorAll('input[type=radio]:checked')]).map(function(o) {
      return o.id;
    });
    console.log(checkedBoxes);
    for (i = 0; i < markers1.length; i++) {
      marker = gmarkers1[i];

      //Filter to show any markets containing ALL of the selected options
      if (typeof marker.category == 'object' && checkedBoxes.every(function(o) {
          return (marker.category).indexOf(o) >= 0;
        })) {
        bounds.extend(marker.getPosition());
        marker.setVisible(true);
      } else {
        marker.setVisible(false);
      }
      map.fitBounds(bounds);
    }
  } else {
    console.log('No param given');
  }
}




function valueChanged() {




  if (document.getElementById("Rīga").checked == true || document.getElementById("Ogre").checked == true || document.getElementById("Jelgava").checked == true) {
    $("label[for=sort-relevance]").css('visibility', 'hidden');
    $("label[for=sort-relevance]").remove();

  }
}


$('.dropdown-el').click(function(e) {
  e.preventDefault();
  e.stopPropagation();

  $(this).toggleClass('expanded');
  $('#' + $(e.target).attr('for')).prop('checked', true);
  valueChanged();
});
$(document).click(function() {
  $('.dropdown-el').removeClass('expanded');

});

.dropdown-el {
  min-width: 280px;
  position: relative;
  display: inline-block;
  margin-right: 1em;
  min-height: 42px;
  max-height: 42px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  color: #2F4858;
  outline: none;
  border-radius: 6px;
  background-color: rgba(196, 196, 196, 0.4);
  transition: 0.3s all ease-in-out;
}

.dropdown-el input:focus+label {
  font-weight: 700;
}

.dropdown-el input {
  width: 1px;
  height: 1px;
  display: inline-block;
  position: absolute;
  opacity: 0.01;
}

.dropdown-el label {
  display: block;
  line-height: 42px;
  padding-left: 1em;
  padding-right: 3em;
  cursor: pointer;
  position: relative;
  transition: 0.3s color ease-in-out;
}

.dropdown-el label:nth-child(2) {
  margin-top: 38px;
}

.dropdown-el::before {
  content: '';
  position: absolute;
  top: 42px;
  margin-left: 16px;
  width: 211px;
  height: 1px;
  background: #2f4858;
}

.dropdown-el input:checked+label {
  display: block;
  border-top: none;
  position: absolute;
  top: 0;
  width: 100%;
  font-weight: 700;
}

.dropdown-el input:checked+label:nth-child(2) {
  margin-top: 0;
  position: relative;
}

.dropdown-el::after {
  content: '\003E';
  position: absolute;
  right: 0.8em;
  font-weight: 700;
  top: 20px;
  transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
  transition: .4s all ease-in-out;
  transition: all 250ms cubic-bezier(.4, .25, .3, 1);
}

.dropdown-el.expanded {
  background: rgba(196, 196, 196, 0.4);
  border-radius: 6px;
  padding: 0;
  max-height: 15em;
}

.dropdown-el.expanded label:hover {
  font-weight: 700;
}

.dropdown-el.expanded input:checked+label {
  font-weight: 700;
}

.dropdown-el.expanded::after {
  transform: rotate(-90deg) scaleY(1.75);
  top: 0.55em;
}

#map-canvas {
  max-width: 1366px;
  width: 100%;
  height: 648px;
}

.sapnusatbalsta .footer-wrapper-margin {
  margin-top: -41px;
}

.sapnusatbalsta .zilsfooter {
  z-index: 0;
}

.dropdownmap {
  display: flex;
  justify-content: center;
  margin: 90px 0 60px;
  font-size: 18px;
  line-height: 21.94px;
  font-family: montserrat-regular;
}

.dropdownmap_text {
  font-family: montserrat-regular;
  font-weight: 500;
  margin: 0 auto;
  display: block;
  text-align: left;
  color: #FFA800;
  padding-bottom: 15px;
}

.mapselect1 {
  padding-right: 30px;
}

.dropdownmap select {
  width: 288px;
  background: #C4C4C4 40%;
  height: 43px;
  border: 0px;
  padding: 13px 15px 12px 15px;
  border-radius: 6px;
  outline: none;
}

.dropdownmap select option {
  border-radius: 6px;
}

.mapselect1 select option:hover {
  font-weight: 700;
  background-color: yellow;
}

#infowindow {
  background: rgba(255, 168, 0, 0.5);
  display: flex;
  gap: 38px;
  padding: 22px 27px 25px 30px;
}

#infowindow p,
.uznemumi-edinasana p {
  font-family: montserrat-regular;
  font-weight: 400;
  font-size: 18px;
  line-height: 21.94px;
  text-align: right;
}

.infouznemums {
  text-align: right;
}

.AuchUznemums-child1 p {
  padding-top: 30px;
}

.gm-style-iw-d {
  overflow: hidden !important;
  border-radius: 14px;
}

.gm-ui-hover-effect {
  display: none !important;
}

.gm-style-iw {
  padding: 0 !important;
  overflow: visible !important;
}

.gm-style-iw-t::after {
  display: none;
}

.gm-style .gm-style-iw-c {
  background: none;
  border-radius: 14px;
}

.uznemumi-edinasana {
  margin: 150px 271.5px 60px;
}

.sapnusatbalsta_break {
  display: none;
}

<!DOCTYPE html>
<html lang="lv">

<head>
  <title>SparkleHeart</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel='icon' href='assets/img//Intersect.svg' type='image/x-icon' />
  <link rel="stylesheet" href="assets/css/normalize.css" />
  <link rel="stylesheet" href="assets/css/style.css" />
  <link href="assets/css/hamburgers.css" rel="stylesheet">

  <script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js" data-auto-a11y="true"></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>









  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js" integrity="sha512-Rc24PGD2NTEGNYG/EMB+jcFpAltU9svgPcG/73l1/5M6is6gu3Vo1uVqyaNWf/sXfKyI0l240iwX9wpm6HE/Tg==" crossorigin="anonymous"></script>



</head>

<body class="sapnusatbalsta">


  <div class="container">

<main>
    <div class="dropdownmap">



      <div class="mapselect1">
        <p class="dropdownmap_text">Uzņēmuma atrašanās vieta</p>
        <span class="dropdown-el">
                        <label for="sort-relevance" style="pointer-events: none;">Izvēlies</label>
                        <input type="radio" name="sortType" value="Popularity" id="Rīga" onclick="updateView(this)"><label for="Rīga">Rīga</label>
                        <input type="radio" name="sortType" value="PriceIncreasing" id="Jelgava" onclick="updateView(this)"><label for="Jelgava">Jelgava</label>
                        <input type="radio" name="sortType" value="PriceDecreasing" id="Ogre" onclick="updateView(this)"><label for="Ogre">Ogre</label>
                      </span>

      </div>

</div>




      <div id="map-canvas"></div>





      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGwz_8OxIGhS_nOIPS2F_mH1ie5WfmhZ0&map_ids=e24b393c59b842b4&callback=initMap" async defer>
      </script>



      </main>


      <script src='assets/js/theme.js'></script>

    </div>
</body>

</html>

null

Answer 1

您只需将updateView(this)；的调用从内联事件侦听器移到下拉单击处理程序。然后，如果目标是输入，则签入if语句。

顺便说一句，您不需要将其交给updateView()；，因为它只是检查这是否真实。因此，只要为以下函数提供true即可:updateView(true)；

从此处移动函数调用：

<input ... onclick="updateView(this)">

到此处：

$('.dropdown-el').click(function(e) {
  e.preventDefault();
  e.stopPropagation();

  var clickedOption = $('#' + $(e.target).attr('for'));
  if( clickedOption ) {
    $('#' + $(e.target).attr('for')).prop('checked', true);
    updateView(true);
  }
  
  $(this).toggleClass('expanded');
  valueChanged();
});

工作示例：

null

var gmarkers1 = [];
var markers1 = [];

var icon1 = "assets/img/googlemapsmarker.svg";
var icon2 = "assets/img/googlemapsmarker2.svg";

markers1 = [
  [
    '0', 
    '<div id="infowindow"> <img class = "img_smaller_mobile" src = "assets/img/PurchLogo.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">Purch restaurant</h3><p>[phone]</br>Dzelzavas iela 51A, Rīga</p></div></div>', 
    56.9569506, 
    24.1892936, 
    ['Rīga', 'Ēdināšana']
  ],
  [
    '1', '<div id="infowindow"> <img src = "assets/img/KurtsLogo.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">Kurts coffee</h3><p>[phone]</br>Tērbatas iela 2i, Rīga</p></div></div>', 
    56.952127, 
    24.116603, 
    ['Rīga', 'Ēdināšana']
  ],
  [
    '2', '<div id="infowindow"> <img class = "img_smaller_mobile" src = "assets/img/KurtsLogo.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">Kurts coffee</h3><p>[phone]</br>Cēsu iela 20, Rīga</p></div></div>', 
    56.9651915, 
    24.1405323, 
    ['Rīga', 'Ēdināšana']
  ],
  [
    '3', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 
    56.95051, 
    24.11203, 
    ['Rīga', 'Drive-Thru']
  ],
  [
    '4', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 
    56.9606, 
    24.1754, 
    ['Rīga', 'Skaistumkopšana']
  ],
  [
    '5', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 
    56.9535, 
    24.1180, 
    ['Rīga', 'Skaistumkopšana']
  ],
  [
    '6', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 
    56.98, 
    24.1754, 
    ['Rīga', 'Izklaide']
  ],
  [
    '7', '<div id="infowindow"> <img src = "assets/img/AUCHlogo 1.svg"> <div class="AuchUznemums-child1"><h3 class="infouznemums">AUCH beauty home</h3><p>[phone], [phone]</br>[e-mail]</br>Cēsu iela 20, Rīga</p></div></div>', 
    56.9680, 
    24.1750, 
    ['Rīga', 'Izklaide']
  ],
];

var markerCallback = function() {
  for (var i = 0; i < gmarkers1.length; i++) {
    gmarkers1[i].setIcon(icon1);
  }
  this.setIcon(icon2);
}

function initMap() {

  var center = new google.maps.LatLng(56.95051, 24.11203);

  // Added a variable for map center
  var mapOptions = {
    zoom: 13,
    center: center,
    mapId: "e24b393c59b842b4",
    disableDefaultUI: true,
    gestureHandling: 'greedy',
    scrollwheel: false,
  };

  //Customization of the map itself
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);
  }

  // Initialized the map in #map-canvas, added markers from an array
  infowindow = new google.maps.InfoWindow({
    content: '',
  });

}

// Function to add markers to map
function addMarker(marker) {

  console.log("Add marker", marker)
  var category = marker[4];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

  var marker1 = new google.maps.Marker({
    position: pos,
    category: category,
    map: map,
    icon: icon1,

  });

  gmarkers1.push(marker1);

  // Marker click listener (zoom in and open info window)
  google.maps.event.addListener(marker1, 'click', markerCallback);

  google.maps.event.addListener(marker1, "click", (function(marker1, content) {
    return function() {
      console.log("Gmarker 1 gets pushed");

      infowindow.setContent(content);
      infowindow.open(map, marker1);
    };
  })(marker1, content));

  $(document).ready(function() {
    // This will fire when document is ready:
    $(window).resize(function() {
      // This will fire each time the window is resized:
      if ($(window).width() >= 768) {
        // if larger or equal
        infowindow.set("pixelOffset", new google.maps.Size(250, 100));
      } else if ($(window).width() >= 576) {
        // if smaller

        infowindow.set("pixelOffset", new google.maps.Size(150, 235));

      } else {
        infowindow.set("pixelOffset", new google.maps.Size(100, 250));
      }
    }).resize(); // This will simulate a resize to trigger the initial run.
  });

  google.maps.event.addListener(map, "click", function(event) {
    infowindow.close();
    marker1.setIcon(icon1)
  });

}

// Function on Change of checkbox
updateView = function(element) {

  var bounds = new google.maps.LatLngBounds();
  
  if (element) {
    //Get array with names of the checked boxes
    checkedBoxes = ([...document.querySelectorAll('input[type=radio]:checked')]).map(function(o) {
      return o.id;
    });
    console.log(checkedBoxes);
    for (i = 0; i < markers1.length; i++) {
      marker = gmarkers1[i];

      //Filter to show any markets containing ALL of the selected options
      if (typeof marker.category == 'object' && checkedBoxes.every(function(o) {
          return (marker.category).indexOf(o) >= 0;
        })) {
        bounds.extend(marker.getPosition());
        marker.setVisible(true);
      } else {
        marker.setVisible(false);
      }
      map.fitBounds(bounds);
    }
  } else {
    console.log('No param given');
  }
  
}

function valueChanged() {
  if (document.getElementById("Rīga").checked == true || document.getElementById("Ogre").checked == true || document.getElementById("Jelgava").checked == true) {
    $("label[for=sort-relevance]").css('visibility', 'hidden');
    $("label[for=sort-relevance]").remove();
  }
}

$('.dropdown-el').click(function(e) {
  e.preventDefault();
  e.stopPropagation();

  var clickedOption = $('#' + $(e.target).attr('for'));
  if( clickedOption ) {
    $('#' + $(e.target).attr('for')).prop('checked', true);
    updateView(this);
  }
  
  $(this).toggleClass('expanded');
  valueChanged();
});

$(document).click(function() {
  $('.dropdown-el').removeClass('expanded');
});

.dropdown-el {
  min-width: 280px;
  position: relative;
  display: inline-block;
  margin-right: 1em;
  min-height: 42px;
  max-height: 42px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  color: #2F4858;
  outline: none;
  border-radius: 6px;
  background-color: rgba(196, 196, 196, 0.4);
  transition: 0.3s all ease-in-out;
}

.dropdown-el input:focus+label {
  font-weight: 700;
}

.dropdown-el input {
  width: 1px;
  height: 1px;
  display: inline-block;
  position: absolute;
  opacity: 0.01;
}

.dropdown-el label {
  display: block;
  line-height: 42px;
  padding-left: 1em;
  padding-right: 3em;
  cursor: pointer;
  position: relative;
  transition: 0.3s color ease-in-out;
}

.dropdown-el label:nth-child(2) {
  margin-top: 38px;
}

.dropdown-el::before {
  content: '';
  position: absolute;
  top: 42px;
  margin-left: 16px;
  width: 211px;
  height: 1px;
  background: #2f4858;
}

.dropdown-el input:checked+label {
  display: block;
  border-top: none;
  position: absolute;
  top: 0;
  width: 100%;
  font-weight: 700;
}

.dropdown-el input:checked+label:nth-child(2) {
  margin-top: 0;
  position: relative;
}

.dropdown-el::after {
  content: '\003E';
  position: absolute;
  right: 0.8em;
  font-weight: 700;
  top: 20px;
  transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
  transition: .4s all ease-in-out;
  transition: all 250ms cubic-bezier(.4, .25, .3, 1);
}

.dropdown-el.expanded {
  background: rgba(196, 196, 196, 0.4);
  border-radius: 6px;
  padding: 0;
  max-height: 15em;
}

.dropdown-el.expanded label:hover {
  font-weight: 700;
}

.dropdown-el.expanded input:checked+label {
  font-weight: 700;
}

.dropdown-el.expanded::after {
  transform: rotate(-90deg) scaleY(1.75);
  top: 0.55em;
}

#map-canvas {
  max-width: 1366px;
  width: 100%;
  height: 648px;
}

.footer-wrapper-margin {
  margin-top: -41px;
}

.zilsfooter {
  z-index: 0;
}

.dropdownmap {
  display: flex;
  justify-content: center;
  margin: 90px 0 60px;
  font-size: 18px;
  line-height: 21.94px;
  font-family: montserrat-regular;
}

.dropdownmap_text {
  font-family: montserrat-regular;
  font-weight: 500;
  margin: 0 auto;
  display: block;
  text-align: left;
  color: #FFA800;
  padding-bottom: 15px;
}

.mapselect1 {
  padding-right: 30px;
}

.dropdownmap select {
  width: 288px;
  background: #C4C4C4 40%;
  height: 43px;
  border: 0px;
  padding: 13px 15px 12px 15px;
  border-radius: 6px;
  outline: none;
}

.dropdownmap select option {
  border-radius: 6px;
}

.mapselect1 select option:hover {
  font-weight: 700;
  background-color: yellow;
}

#infowindow {
  background: rgba(255, 168, 0, 0.5);
  display: flex;
  gap: 38px;
  padding: 22px 27px 25px 30px;
}

#infowindow p,
.uznemumi-edinasana p {
  font-family: montserrat-regular;
  font-weight: 400;
  font-size: 18px;
  line-height: 21.94px;
  text-align: right;
}

.infouznemums {
  text-align: right;
}

.AuchUznemums-child1 p {
  padding-top: 30px;
}

.gm-style-iw-d {
  overflow: hidden !important;
  border-radius: 14px;
}

.gm-ui-hover-effect {
  display: none !important;
}

.gm-style-iw {
  padding: 0 !important;
  overflow: visible !important;
}

.gm-style-iw-t::after {
  display: none;
}

.gm-style .gm-style-iw-c {
  background: none;
  border-radius: 14px;
}

.uznemumi-edinasana {
  margin: 150px 271.5px 60px;
}

.sapnusatbalsta_break {
  display: none;
}

<script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js" data-auto-a11y="true"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGwz_8OxIGhS_nOIPS2F_mH1ie5WfmhZ0&map_ids=e24b393c59b842b4&callback=initMap" async defer></script>

<div class="container">

    <main>
    
        <div class="dropdownmap">
            <div class="mapselect1">
                <p class="dropdownmap_text">Uzņēmuma atrašanās vieta</p>
                <span class="dropdown-el">
                    <label for="sort-relevance" style="pointer-events: none;">Izvēlies</label>
                    <input type="radio" name="sortType" value="Popularity" id="Rīga">
                    <label for="Rīga">Rīga</label>
                    <input type="radio" name="sortType" value="PriceIncreasing" id="Jelgava">
                    <label for="Jelgava">Jelgava</label>
                    <input type="radio" name="sortType" value="PriceDecreasing" id="Ogre">
                    <label for="Ogre">Ogre</label>
                </span>
            </div>
        </div>

        <div id="map-canvas"></div>

    </main>

</div>