Google Maps Twitter Mashup

Google Maps
The map data you see inside Google Maps comes from multiple sources, including user-provided data, but is primarily compiled by Tele Atlas, a global leader in navigation and location-based services. For our mashup we will be combining Google Maps with Twitter. Therefore all of the map data will be called from Google’s database. We will not be downloading any GIS data, it is all essentially in the cloud. The specific sources of the map data my be found in the lower right corner of the map.

Add Google Maps to your website
In order to add the full interactivity of google maps to your website you need to obtain an API Key. Most providers of this kind of data or service require a key in order to control who uses the data, how, and how much. This is the limitation of using someone else’s database versus using your own. To create your API key:

1. Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
2. Click the Services link from the left-hand menu.
3. Activate the Google Maps API v3 service.
4. Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.

Google provides a list of all of the commands you can implement into your map to accommodate usability.

This is what the code behind the placed map looks like.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Notice the lat, long reference. This particular example is centered on Sydney, Australia. The zoom function is self explanatory and is one of the functions listed above. Now that we have the base map it’s time to implement the twitter feeds.

Accessing the Twitter API
http://search.twitter.com/search.json?rpp=25&geocode=41.881256,-87.62485,20mi&callback=?
Broken down:
q=NATOChicago           search term
rpp=5                              the number of tweets to return
geocode                          return tweets within a given radius of a given lat,long

Beginning in 2009, tweets have had the capability of being georeferenced.

When placed into a browser, this is what is spit out:

According to this, the following are the key parameters we need:

  • object -> results (array) -> from_user
  • object -> results (array) -> location
  • object -> results (array) -> geo
  • object -> results (array) -> profile_image_url
  • object -> results (array) -> text

Displaying the Tweets
Now that we have the tweets, we need to map them.

//Function to get data from Twitter
ryan.getTwitter = function()
{
    removeLayer();
    bounds = new google.maps.LatLngBounds ();
    $.getJSON('http://search.twitter.com/search.json?rpp=25&amp;geocode='+map.getCenter().lat()+','+map.getCenter().lng()+',20mi&amp;callback=?',
        function(data)
        {
            $.each(data.results, function(i,item){
                if (item.geo == null)
                {
                trace(i + ' no geo data');
                }
                else
                {
                infoWindowContent = '<strong>'+item.from_user+'</strong><br>';
                infoWindowContent += '<img src="'+item.profile_image_url+'"></a><br>';
                infoWindowContent += ''+item.text+'';
ryan.createTwitterMarker(i,item.geo.coordinates[0],item.geo.coordinates[1],infoWindowContent,item.profile_image_url);
                }    
            });
        });
}

If the tweet is geocoded and info window will display the user name, profile pic and the text. However, most Twitter users have no opted into having their tweets tagged. We will address that later.

Mapping the Tweets

//Function to create Twitter Marker
createTwitterMarker = function(i,latitude,longitude,infoWindowContent,icon)
{
    var markerLatLng = new google.maps.LatLng(latitude,longitude);  

    //extent bounds for each Tweet and adjust map to fit to it
    bounds.extend(markerLatLng);
    map.fitBounds(bounds);
    var image = new google.maps.MarkerImage(icon, null, null, null, new google.maps.Size(32,32));

    twitter[i] = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        title: infoWindowContent,
        icon: image
        });

    //add an onclick event
    google.maps.event.addListener(twitter[i], 'click', function() {
        infowindow.setContent(infoWindowContent);
        infowindow.open(map,twitter[i]);
        });
}

Creating a function to Geocode the results

The following code creates a variable to geocode the results and addresses the non-geotagged tweets by using the location value which is the city in which the tweet was received.

//Function to get data from Twitter
ryan.getTwitter = function()
{
    removeLayer();
    bounds = new google.maps.LatLngBounds ();
    $.getJSON('http://search.twitter.com/search.json?rpp=25&amp;geocode='+map.getCenter().lat()+','+map.getCenter().lng()+',20mi&amp;callback=?',
        function(data)
        {
            $.each(data.results, function(i,item){
                if (item.geo == null)
                {
                infoWindowContent = '<strong>'+item.from_user+'</strong><br>';
                infoWindowContent += '<img src="'+item.profile_image_url+'"></a><br>';
                infoWindowContent += ''+item.text+'';
                ryan.geocodeTwitter(i,item.location,infoWindowContent,item.profile_image_url);
                }
                else
                {
                infoWindowContent = '<strong>'+item.from_user+'</strong><br>';
                infoWindowContent += '<img src="'+item.profile_image_url+'"></a><br>';
                infoWindowContent += ''+item.text+'';
ryan.createTwitterMarker(i,item.geo.coordinates[0],item.geo.coordinates[1],infoWindowContent,item.profile_image_url);
                }    
            });
        });
}

Now the geocoder function:

ryan.geocodeTwitter = function(i,genLocation,infoWindowContent,icon) 
{
    var geocoderRequest = {address: genLocation}
    geocoder.geocode(geocoderRequest, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) 
        {
ryan.createTwitterMarker(i,results[0].geometry.location.Da,results[0].geometry.location.Ea,infoWindowContent,icon);
            trace(i + ' lat/long');
            trace(results[0].geometry.location);
        } 
        else 
        {
            trace("Geocode was not successful for the following reason: " + status);
        }
    });
}

The above function will run the geocode parameters of the tweets through Google’s geocoder function which is designed to place a marker on a map using the twittermarker function. The problem is that since most tweets are not geocoded this will result an a group of tweets stacked on top of one another.

Conclusion
My precedent studies touted the value of geocoded social media in times of natural disasters and man-made crises such as wars. However, given the lack of participation by most users, the value of this proposal is severely limited. Therefore tracking tweets may not be the best way to track larger movements of people. One may try tracking something which is more likely to have geocoordinates automatically assigned such as photos. Flickr would be a natural next step.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s