Интеграция Google Maps API с плагином комментариев Facebook

Хорошо, есть похожий вопрос, но он все еще не решен.

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

Вот что у меня есть на данный момент:

<script type="text/javascript">

        var map;
        function initialize() {
        var myOptions = {
            zoom: 3,
            center: new google.maps.LatLng(46.073231,-41.865238),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
                map = new
                    google.maps.Map(document.getElementById('map'),
            myOptions);


        var locations = [
            ["Event",51.526902,-0.085588,"London, UK","Jan 23, 2012"],
            ["Event",34.083517,-118.389373,"Los Angeles, USA","Jan 25, 2012"],
            ["Event",40.716428,-73.966241,"New York, USA","Jan 30, 2012"],
            ["Event",40.723454,-73.986497,"Queens, USA","Jan 31, 2012"]
        ];

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) 
        {
            var iconImage, heading;

            switch(locations[i][0]) {
                case "Event":   
                    iconImage = "img/event.png";
                    heading = "<h2 class='event'><img src="+iconImage+" />" +locations[i][3]+"</h2>";
                    break;

            marker = new google.maps.Marker({
                icon: iconImage,
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });
            google.maps.event.addListener(marker, 'click', (function(marker, i, heading) {
                return function() {
                    markerContent = heading+"<p><b></b> "+ locations[i][4]+"</p>";
                    infowindow.setContent(markerContent);
                    infowindow.open(map, marker);
                }
            })(marker, i, heading));  // end marker click function
                }}; // end for loop     
    </script>

person rudster    schedule 26.11.2012    source источник


Ответы (1)


Это просто вопрос создания уникальных информационных окон для каждого из ваших маркеров и обеспечения того, чтобы плагин fb внутри каждого указывал на действительный уникальный URL-адрес. Если вы не используете маркеры и разрешаете пользователям щелкать мышью в любом месте карты, решите проблему с помощью хеша широта + долгота.

Если у вас есть проблемы с созданием уникальных информационных окон, это может помочь: API карт Google несколько маркеров с информационными окнами

person Robyflc    schedule 27.11.2012
comment
Я добавил код и, кажется, создал уникальные информационные окна. Моя проблема теперь в том, как и где разместить плагин Facebook и как извлечь действительные уникальные URL-адреса. - person rudster; 28.11.2012
comment
Для начала вы можете сгенерировать для него html-код здесь: developers.facebook.com/ docs / reference / plugins / comments Затем вам просто нужно поместить его где-нибудь в этой строке: markerContent = heading + ‹p› ‹b› ‹/b› + locations [i] [4] + ‹/p› ; Наконец, вам понадобится действующий URL для каждого маркера, например, yousite.com/marker/marker_id. . Вы можете создать страницы для каждого маркера или, если у вас их много, вы можете заставить свой сервер обрабатывать URL-адреса как действительные, даже не создавая страницу (как мы делаем с красивыми URL-адресами). - person Robyflc; 28.11.2012
comment
Какой код мне вставить в эту строку? Это '‹div class = fb-comments data-href = example.com data-num-posts = 5 data- width = 250 ›‹/div› '? Однако он почему-то не распознает класс div. Извините, но я ДЕЙСТВИТЕЛЬНО новичок в Javascript, поэтому мне действительно нужна помощь, шаг за шагом. :( - person rudster; 29.11.2012
comment
Именно этот код (конечно, вы должны изменить data-href). Чтобы он работал, вам также необходимо создать приложение и включить JS api в свой код. Я сделал для вас пример: jsfiddle.net/dtVh9 - person Robyflc; 29.11.2012
comment
Спасибо, что вернулись так быстро! Итак ... Я думаю, что в поле data-href я должен разместить уникальные URL-адреса? Мне как-то нужно создать цикл для URL-адресов ...? - person rudster; 29.11.2012
comment
Я предполагаю, что поле data-href - это то место, где я должен разместить уникальные URL-адреса. Да. Вы можете использовать цикл for уже в своем коде. - person Robyflc; 30.11.2012