Как переключить пользовательское всплывающее окно, прикрепленное к маркеру на картах Google? - PullRequest
Новая
       53

Как переключить пользовательское всплывающее окно, прикрепленное к маркеру на картах Google?

0 голосов
/ 29 октября 2019

Я создал серию наложений всплывающих окон, прикрепленных к собственным маркерам. Однако я пытаюсь добиться того, чтобы всплывающие окна переключали свою видимость при нажатии. Точнее говоря, я хочу, чтобы каждое всплывающее окно появлялось при нажатии на маркер, к которому они принадлежат, но исчезало при нажатии на другое место на карте, когда они «активны», как в в этом примере

IВозникли проблемы из-за специфики библиотеки API Google Maps , которая не позволяет использовать событие переключения на слушателе, прикрепленном к маркеру.

Я полагаю, яМне нужно связать массив содержимого с условием if, но я не понимаю, как это сделать, поскольку это должно быть связано с созданием функции-прототипа, которая генерирует всплывающие окна для каждого маркера ... Любые предложения о том, какчтобы решить это?

CodePen Здесь 

<script>


  // Initialize and add the map
  function initMap() {

    // The location
    var FabLabLisboa = {lat: 38.72194, lng: -9.13201};
    var FabLabABA = {lat: 38.70892, lng: -9.14029};
    var ImpactHub = {lat: 38.69892, lng: -9.18029};
    // The map, centered at Uluru
    var map = new google.maps.Map(
        document.getElementById('map'), { zoom: 12, center: FabLabLisboa,

          //controls
    mapTypeControl: false,
    streetViewControl: false,
    rotateControl: false,

    styles: [{ //Stylese of the map 
    }]

   }); 

    var icons = {
      standard: {
        icon:'img/map_icons/Mark.svg'
      },
      different: {
        icon:'img/map_icons/Natav.svg'
      }
    };


var locations = [
  ["", FabLabLisboa, 1], ["", FabLabABA, 2], ["", ImpactHub, 3]
];

var content = ["content", "content1", "content2"];



 var marker, i;

 for (i = 0; i < locations.length; i++) {
   var location = locations[i];
   marker = new google.maps.Marker({
     position: new google.maps.LatLng(location[1], location[2], location[3]),
     icon: icons.standard.icon,
     map: map
   });


   google.maps.event.addListener(marker, 'click', (function(marker, i) {

     return function() {
       document.getElementById(content[i]).style.visibility="visible";
       var location = locations[i];
       Popup = createPopupClass();
       popup = new Popup(
           new google.maps.LatLng(location[1], location[2], location[3]),
           document.getElementById(content[i]));
           popup.setMap(map);

       };

       })(marker, i));

    }
  }
...