How can I use jQuery or JavaScript inside a Google Maps InfoWindow?

Question

Problem: I want to put Twitter Share Button in my Google Map InfoWindow.

I have used a google.maps.event.addListener(infowindow, 'domready' function() { ...code...} to listen for the InfoWindow to be added to the DOM but it only works on the first InfoWindow launched.

The Twitter Share Button Examples apply the following script:

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

against the class:

"twitter-share-button"

Assumption: Now the problem as I see it is that the InfoWindow and markers get created in the $.each() loop and I don't know what event to get jQuery to watch for.

I have tried creating a jsfiddle as an example but I can't get it to load the map if I use $.each() like in the live site but I link it here in case it helps you demonstrate an answer:

My non-working JSFiddle.

My live development site which shows the problem.

Other Stack Overflow questions: Similar but different.

Calling a JavaScript function within an InfoWindow (Google Maps)

Tweet button and infoWindow

I've seen the jQuery-ui-map plugin. That doesn't do anything I can't do in straight JavaScript.

Map.js: or Pastebin link to code below but with syntax highlighting

$('.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");
            });
        });
    });
});

Cheers.

Answer 1

Calling

twttr.widgets.load();

after

bubble.open(map, this);

should do the trick.

Since you're loading the twitter widgets JavaScript asynchronously, you might want to check if twttr is already defined, before calling it.