在谷歌地图的商店列表中点击商店后显示标记的信息窗口。这是怎么做到的?

问题描述 投票:0回答:0

我在 Google 地图上有一个从数组加载的商店列表。 当我单击一个标记时,会出现一个信息窗口,其中包含每个标记的单独内容,并且在商店列表中地图的左侧,已选择分配给该标记的商店。

Example of InfoWindow appears and store is selected after click on marker

另一种方式:当我点击地图左侧列表中的任何商店时,地图以该标记的位置为中心,但是该标记的信息窗口没有出现。

Example of InfoWindow don't appears after click on store store list

我需要重写代码,以便在我点击地图左侧列表中的任何商店时出现信息窗口,但我无法正确重写代码。

你知道如何正确重写代码以使其工作吗?

这里是负责在左侧显示商店以及在地图上创建和显示标记的代码片段。

// Initialize the map -------------------------------------------------------
        locator.map = new google.maps.Map(mapEl, configuration.mapOptions);

 // Store selection

        const selectResultItem = function(locationIdx, panToMarker, scrollToResult) {
          locator.selectedLocationIdx = locationIdx;
          for (let locationElem of resultsContainerEl.children) {
            locationElem.classList.remove('selected');
            if (getResultIndex(locationElem) === locator.selectedLocationIdx) {
              locationElem.classList.add('selected');
              if (scrollToResult) {
                panelEl.scrollTop = locationElem.offsetTop;
              }
            }
          }
          if (panToMarker && (locationIdx != null)) {
            locator.map.panTo(locator.locations[locationIdx].coords);
          }
        };

         const infowindow = new google.maps.InfoWindow();
        // Create a marker for each location.
        const markers = locator.locations.map(function(location, index) {
          const marker = new google.maps.Marker({
            position: location.coords,
            map: locator.map,
            title: location.title,
            animation:google.maps.Animation.DROP,
          });
          marker.addListener('click', function() {
            infowindow.setContent('<b>'+location.title+'</b><br>'+location.adress+'<br>'+location.phone+'<br>');
            infowindow.open(map,marker);
            selectResultItem(index, false, true);
          });
          return marker;
        });
google-maps google-maps-api-3 google-maps-markers
© www.soinside.com 2019 - 2024. All rights reserved.