Google has now stopped its Earth API and Maps API is a paid for API nowadays. Some capabilities have also been either removed or changed. Therefore, I had to remove all examples of VizMap applications I had created. I didn’t remove the entire topic as I thought some of the code may still be useful with some modifications. 

javaScript: Twitter API integration with  google Earth and maps

This relates to Data Driven Mapping applications and the Javascript HowTo section

Twitter API

Using the Twitter RESTful API, it is very straightforward to add relevant tweets to an infoWindow or infoBubble.

Narrowing down the the query through Twitter Fields

Deciding which tweets qualify is an important part of planning which to show in our vizMap applications. The first is based on the data applying to the current spot. The VizMap Tabs parameter sheet defines which data fields to use to filter tweets – any tweets which match the contents of the fields specified in Twitter Fields will be considered for inclusion. In the example below, the Employee Tab will consider including Tweets which mention the employees name. Any field, or comma separated list of fields, in the VizMap Dictionary can be used to filter tweets on.


These are stored in a google visualization table, just like all the other infoTab components, allowing me to re-use all the same code used to create viewTables.

if (ie['twitter']){
   this.tTable = this.tweetTable();
mcpherInfoTab.prototype.tweetTable = function () {
return (this.viewTable ('twitter',false,false));


This is a parameter specified in VizMap Controlling Execution. If a value is specified here, then only tweets which originated within that values distance from the spot being shown are considered. Example syntax is 5mi or 1.7km.


This is a parameter specified in VizMap Controlling Execution that limits the number of tweets returned to a small number. Remember that they are being displayed inside an infobubble, so should be no more than about 10.


This is a parameter specified in VizMap Controlling Execution that limits the number of tweets to a particular standard language code, such as en, fr and so on. If omitted, all languages are included.
Here is the code for refreshing tweets. Unlike the other infotab contents, which are all set up just once on initialization, this is refreshed each time a tab view is changed. This is to allow new tweets to be shown whenever they happen.  A simple generated request will look something like this,-73.982025,20mi&lang=en&rpp=10&page=1

and here is the code to create it.

mcpherItem.prototype.refreshTweets = function (conTab) {    
  var ie=conTab.infoElements['twitter'];
  var qt=conTab.tTable;
  var spot =;
  var vm = spot.parent;
  if (!ie)return(null);
  var sArg = "?";
  var sRest = "";
  // create the query from any terms in the twitter table
  var sQ ='';
  if (qt){
   for (var i =0; i < qt.getNumberOfRows(); i++) {
    var sa='';
    for (var j =0; j < qt.getNumberOfColumns(); j++) {
     var s = qt.getValue(i,j).toString();
     if (s) {
      if(sa) sa += '+AND+';
      sa += s ;
    if (sa) {
     if (sQ) sQ += '+OR+';
     sQ += '(' + sa + ')';
  if (sQ){
   sRest += sArg + "q=" + sQ;
   sArg = "&";
  // location based
  if (vm.control.twitterradius){
   sRest += sArg + 'geocode=' + + "," + spot.lng + "," + vm.control.twitterradius;
   sArg = "&";
  //language selected
  if (vm.control.twitterlanguage){
   sRest += sArg + 'lang=' + vm.control.twitterlanguage;
   sArg = "&";
  if (vm.control.twittermaxtweets){
   sRest += sArg + 'rpp=' + vm.control.twittermaxtweets + '&page=1';
   sArg = "&";

  $.getJSON(encodeURI(sRest) + '&callback=?',
   $(ie).append('<table><th class="mctweetheader" colspan=2>' +
     '<a href="">' + 
     'Follow @brucemcpherson</a>' + 
     (vm.control.twitterradius ?  '<br>Tweets within ' + vm.control.twitterradius + ' of ' + spot.title:'') +
   $.each(resp.results, function(i,item){
    $(ie).append('<tr><td class="mctweet">' +
      '<img src="'+item.profile_image_url+ '" ' +
      (mcpherIsNumber(vm.control.twitterimagewidth) ?  
        'width="' + vm.control.twitterimagewidth +'"' : '') +
      '<td class="mctweet" rowspan="2">' + item.created_at+':'+item.text + 
      '</tr><tr><td class="mctweet">@' + item.from_user + ':</td>' +

Using jQuery

Note that jQuery is used here. Normally I just stick to plain javaScript, but in this case jQuery makes it easier to deal with handling the REST response.
As usual questions, feedback and comments are welcome at our forum. Now lets take a look at more javaScript snippets from this application