Проблема: Я хочу добавить кнопку «Поделиться Twitter» в мое информационное окно Google Map.
Я использовал google.maps.event.addListener (infowindow, 'domready' function () {... code ...} для прослушивания InfoWindow, добавляемого в DOM, но он работает только в первом запущенном InfoWindow.
Примеры кнопок Twitter Share применяют следующий скрипт:
!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-wjs");
против класса:
"twitter-share-button"
Предположение:
Теперь проблема, как я вижу, состоит в том, что InfoWindow и маркеры создаются в цикле $ .each (), и я не знаю, какое событие получить jQuery для наблюдения.
Я попытался создать jsfiddle в качестве примера, но я не могу заставить его загрузить карту, если я использую $ .each (), как на живом сайте, но я привожу здесь ссылку на случай, если она поможет вам продемонстрировать ответ:
Мой нерабочий JSFiddle .
Мой сайт живой разработки, который показывает проблему .
Другие вопросы о переполнении стека: похожие, но разные.
Вызов функции JavaScript в InfoWindow (Google Maps)
Кнопка Tweet и информационное окно
Я видел плагин jQuery-ui-map . Это не делает ничего, что я не могу сделать в прямом JavaScript.
Map.js: или Вставьте ссылку на код ниже, но с подсветкой синтаксиса
$('.page-map').live("pageshow", function() {
$.getJSON("/rest/Pub", function(data) {
var latlng = new google.maps.LatLng(59.920, 10.750);
var map = new google.maps.Map(document.getElementById("map-canvas"), {
// zoom is good on iphone @ 13 but better on desktop @ 14
zoom: 12,
center: latlng,
backgroundColor: 'black',
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.HYBRID
});
var bubble = new google.maps.InfoWindow();
var pubs = data.list.Pub;
$.each(pubs, function(i, pub) {
var beer;
var pubaddress = encodeURI(pub.pub_address);
var pubname = encodeURI(pub.pub_name);
var posi = new google.maps.LatLng(pub.pub_lat, pub.pub_long);
var marker = new google.maps.Marker({
animation: (pub.pub_bounce =='true') ? google.maps.Animation.BOUNCE : null,
map: map,
icon: "/static/images/" + pub.beer_price + ".png",
shadow: 'static/images/shadow.png',
position: posi,
title: pub.pub_name
});
if (pub.beer_price == 99) {
marker.setZIndex(1);
} else {
marker.setZIndex(100);
}
google.maps.event.addListener(marker, 'click', function() {
// http://mapki.com/wiki/Google_Map_Parameters
if (pub.beer_price == 99) {
beer = '?';
} else {
beer = pub.beer_price;
}
tweet = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://oslogigs.com" data-text="' + pub.pub_name + '" data-lang="en" data-via="OsloGigs" data-hashtags="oslo, oslogigs, norway">Tweet</a>';
content_string = '<h1>'+ pub.pub_name + '</h1>'+
'<p><a href="http://maps.google.com/?saddr=Current%20Location&daddr=' +
pubaddress + '+(' + pubname + ')&dirflg=w&t=h">Google Maps Directions</a></p>' +
'<p>Phone:<a href="tel:' + pub.pub_phone + '">' + pub.pub_phone + '</a></p>' +
'<p>Halvliterpris: NOK <b>' + beer + '</b></p><p>' + tweet + '</p>';
bubble.setContent(content_string);
console.log(bubble.getContent());
bubble.open(map, this);
});
google.maps.event.addListener(bubble, 'domready', function() {
//$('.twitter-share-button').on('domready', function(event) {
console.log("Iteration:"+ i + " Twitter javascript loaded " + pub.pub_name);
!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-wjs");
});
});
});
});
Приветствие.