0

Necesito mostrar widgets de twitter embebidos en un infowindow de google maps.

No se porque el primer marcador que abro si que me funciona, pero los demás no me enseña los tweets, solo el texto de la URL a twitter.

Este es el js que estoy usando.

function initialize() {

      var places = [
        [ 'durango' , 43.169506, -2.628850, "795574031537807361"],
        [ 'oñati', 43.032913, -2.409600, "795920088650153984"],
        [ 'gernika', 43.310520, -2.681913, "795951433736654849"]
      ];

      var i, marcadores = [];
      for (i = 0; i < places.length; i++) {
        var tweets = '<div id="'+places[i][0]+'" class="infowindow-content"><a class="twitter-timeline"  href="https://twitter.com/search?q=%23365egun%20%23'+places[i][0]+'" data-widget-id="'+places[i][3]+'">#365egun #'+places[i][0]+' gaiari buruzko Txioak</a></div>';
        marcadores.push([tweets, places[i][1], places[i][2]]);
      }


      var map = new google.maps.Map(document.getElementById('mapa'), {
        zoom: 9,
        center: new google.maps.LatLng(43.169506, -2.628850),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

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

      var marker, i;
      for (i = 0; i < marcadores.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]),
          map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(marcadores[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }

      google.maps.event.addListener(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 = "http://platform.twitter.com/widgets.js";
                  fjs.parentNode.insertBefore(js, fjs);
              }
          }(document, "script", "twitter-wjs");
      });
    }

Aqui podeis ver el codigo en funcionamiento.

https://jsfiddle.net/ezg1g6t3/

Tampoco se porque en jsfiddle no me enseña ninguno de los widgets. Alguna respuesta?

0

1 respuesta 1

0

En este momento tienes un solo infowindow. Al pinchar cada marker, ese infowindow se va moviendo de un marker al otro:

var infowindow = new google.maps.InfoWindow(); // <-- el único infowindow compartido

var marker, i;
for (i = 0; i < marcadores.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]),
    map: map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(marcadores[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

Necesitas hacer que cada marker tenga su propio infowindow. Por ejemplo puedes adosar el infowindow directamente como propiedad del marker:

var marker, i;
for (i = 0; i < marcadores.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]),
    map: map
  });
  marker.infowindow = new google.maps.InfoWindow(); // <-- propio del marker
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      marker.infowindow.setContent(marcadores[i][0]);
      marker.infowindow.open(map, marker);
    }
  })(marker, i));
}

Te dejé un fiddle: https://jsfiddle.net/L6brdemh/1/

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.