Maps API v3 Twitter in infoWindow

Embed a tweet in an infoWindow

by Alex Azuero

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 400px;
}
.infowindow-content {
    height: 230px;
}

JavaScript

var myCenter = new google.maps.LatLng(51.508742, -0.120850);

function initialize() {
    
    var mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);

    var marker = new google.maps.Marker({
        position: myCenter,
    });

    marker.setMap(map);

    var text = '<div class="infowindow-content"><blockquote class="twitter-tweet" lang="en"><p>twitter will be embeded here </p>&mdash; Nichim Izazvan (@NichimIzazvan) <a href="https://twitter.com/NichimIzazvan/statuses/419180893035827200">January 3, 2014</a></blockquote></div>';
    
    var infowindow = new google.maps.InfoWindow({
        content: text
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });

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

initialize();