Show more than one infowindow with embedded tweets

Question

Show more than one infowindow with embedded tweets

Navigation

#1 by (0 votes)

0

I need to show twitter widgets embedded in an infowindow of google maps.

I do not know why the first bookmark I open is that it works for me, but the others do not show me the tweets, only the text of the URL to twitter.

This is the js I'm using.

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");
      });
    }

Here you can see the code in operation.

link

I do not know either because jsfiddle does not teach me any of the widgets. Any answer?

javascript google-maps twitter-api

asked by xabikip 08.11.2016 в 16:53

source

1 answer

Reload functions after ajax response Error with downloading Eclipse

score 0 · Answer 1

At this time you have a single infowindow. When clicking each marker, that infowindow moves from one marker to the other:

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));
}

You need to make each marker have its own infowindow. For example, you can attach the infowindow directly as property of the 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));
}

I left you a fiddle: link