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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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