Встраивайте твиты в несколько маркеров на Картах Google.

Я использую Node.js и (ванильный) JavaScript для создания веб-приложения на основе Google Maps. Я хочу иметь возможность отображать встроенные твиты внутри информационного окна для каждого маркера, но я не могу заставить его работать - больше, чем для первого маркера. Остальные просто не будут показывать встроенный твит. Я совершенно уверен, что проблема связана с частью информационного окна «domready», которая должна загружать часть встроенного твита. Я использовал решение, найденное в этом вопросе SO. К сожалению, это работает только для одного маркера, если я добавлю больше маркеров, это будет работать только для первого маркера.

Как я понимаю, как это работает, вы устанавливаете содержимое в информационном окне, а часть «domready» выполняет часть в этом информационном окне, как только информационное окно загружается в DOM. Я немного озадачен тем, зачем это нужно: если бы я в своем простом HTML загружал два бита как:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Thanks to those that provide infrastructure to the Build WG:<br><br>Tier 1:<br>✨ <a href="https://twitter.com/digitalocean?ref_src=twsrc%5Etfw">@digitalocean</a><br>✨ <a href="https://twitter.com/Rackspace?ref_src=twsrc%5Etfw">@Rackspace</a><br><br>Tier 2:<a href="https://twitter.com/Microsoft?ref_src=twsrc%5Etfw">@Microsoft</a>, <a href="https://twitter.com/joyent?ref_src=twsrc%5Etfw">@joyent</a>, <a href="https://twitter.com/IBM?ref_src=twsrc%5Etfw">@IBM</a>, <a href="https://twitter.com/MacStadium?ref_src=twsrc%5Etfw">@MacStadium</a>, <a href="https://twitter.com/Scaleway?ref_src=twsrc%5Etfw">@Scaleway</a>, <a href="https://twitter.com/Arm?ref_src=twsrc%5Etfw">@arm</a>, <a href="https://twitter.com/Cloudflare?ref_src=twsrc%5Etfw">@Cloudflare</a>, <a href="https://twitter.com/osuosl?ref_src=twsrc%5Etfw">@osuosl</a>, <a href="https://twitter.com/packethost?ref_src=twsrc%5Etfw">@packethost</a>, <a href="https://twitter.com/intel?ref_src=twsrc%5Etfw">@intel</a><br>&mdash; Node.js (@nodejs) <a href="https://twitter.com/nodejs/status/1409578417788526603?ref_src=twsrc%5Etfw">June 28, 2021</a></blockquote> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">???? we&#39;ll be shipping security releases for all supported release lines (v16.x, v14.x, and v12.x) on Thursday, July 1st to address one high severity issue and three medium severity issues.<br></p>&mdash; Node.js (@nodejs) <a href="https://twitter.com/nodejs/status/1408095824748351504?ref_src=twsrc%5Etfw">June 24, 2021</a></blockquote> 

и ЗАТЕМ запустите скрипт виджета Twitter (до или) после, он загрузит приведенный выше код во встроенные твиты.

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Если я сделаю то же самое, например, добавлю скрипт виджета Twitter в нижнюю часть моей HTML-страницы и добавлю в свое информационное окно в Google Maps, он не будет загружаться во встроенные твиты. Вместо этого из примеров, которые я нашел, наиболее часто используется «домовая» часть Карт Google.

Это мой текущий код. Переменная «корректировщик» — это объект с такими атрибутами, как дескриптор Twitter, имя и т. д.

 var map;

 function initMap() {
    map = new google.maps.Map(document.getElementById("us_map"), {
    center: { lat: 36.79031663437231, lng: -95.3220996682404},  
    zoom: 6,            
 });

const spotter_infowindow = new google.maps.InfoWindow();
// Create markers.
function createSpotterMarker(spotter) {
     
   let use_icon = {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: "#08123b",
      fillOpacity: 0.6,
      strokeColor: '#00A',             
      strokeOpacity: 0.9,
      strokeWeight: 1,
      scale: 3
    }


   const marker = new google.maps.Marker({
      map: map,
      // 39.81161036791626, -98.56477154899072

      position: new google.maps.LatLng(spotter.lat, spotter.lon),                
      icon: use_icon,
      labelClass: "spotter",
      title: spotter.first + " " + spotter.last + "(@" + spotter.twitter + ")"
   });    

   if (spotter.twitter != '' && spotter.twitter != null) { 
      marker.addListener("click", () => {      
         spotter_infowindow.close();   
         spotter_infowindow.setContent( "<div class='infowindow-content'><blockquote class='twitter-tweet' lang='en'><p>twitter will be embeded here </p> <a href='https://twitter.com/x/statuses/" + spotter_tweet['id'] + "'></a></blockquote></div>"   );      
         spotter_infowindow.open({
            anchor: marker,
            map,
            shouldFocus: false,
         });
      });

      google.maps.event.addListenerOnce(spotter_infowindow, 'domready', function () {
         ! function (d, s, id) {
           var js, fjs = d.getElementsByTagName(s)[0];
           if (!d.getElementById(id)) {
               js = d.createElement(s);
               js.id = id;
               js.src = "//platform.twitter.com/widgets.js";
               fjs.parentNode.insertBefore(js, fjs);
           }
         }(document, "script", "twitter-widgets");
      });                     
   
   }

Стоит отметить, что это мой первый проект Node.js и я не являюсь опытным JavaScript-программистом. Функции, подобные тем, что в слушателе, я не понимаю полностью.

Как я могу заставить это работать не только для одного маркера, но и для всех?


person Christoffer    schedule 01.07.2021    source источник