Я использую 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>— 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'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>— 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-программистом. Функции, подобные тем, что в слушателе, я не понимаю полностью.
Как я могу заставить это работать не только для одного маркера, но и для всех?