Question

I want to integrate Tweet button into a Google Maps v3 infoWindow (infoBox), with I have no success. Of course the script I use works on a simple page. I set up the twitter’s js in my template file, added anchor to the html variable in the gmaps javascript file:
…
Tweet
…

What now can be see is only the “Tweet” text if I hover over the anchor link, and no Tweet grapic button is visible. If I click on this button, Twitter site loads but shares nothing.

With Facebook Like button I had to implement a line of code, whet the “domready” event runs.

How to do it Twitter?

Answer 1

I’m having the same problem but am getting closer to solving it.

I’m guessing you’re using the standard Twitter examples where you add an <a> tag like:

<a href="https://twitter.com/share" class="twitter-share-button" 
data-lang="en">Tweet</a>

And then need to get their JavaScript to load:

<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");</script>

So the problem is likely that the infoWindow isn’t getting attached to the DOM.

The Google Maps V3 API InfoWindow Class has an Event “domready”.

So if you’re using jQuery like I am then you need to do something like:

google.maps.event.addListener(bubble, 'domready', function(event) {
        !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");
});

Bearing in mind that I haven’t got this to work yet 🙂

Let’s sort this sucker out!