Skip to content

Instantly share code, notes, and snippets.

@chico

chico/gist:1008782

Created June 5, 2011 08:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chico/1008782 to your computer and use it in GitHub Desktop.
Save chico/1008782 to your computer and use it in GitHub Desktop.
Download ZIP
Royal Wedding Visualisation
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://static.clientsection.co.uk/css/weddingify-example.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://static.clientsection.co.uk/css/weddingify-example-ie.css" /><![endif]-->
</head>
<body>
<div id="bg"><div id="map" class="map"></div></div>
<div class="tweets"><div id="tweetcount"></div></div>
<script type="text/javascript">
$(function () {
function mapView(mapId, latitude, longitude) {
var map;
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(mapId));
var loc = new GLatLng(latitude, longitude);
map.addControl(new GSmallZoomControl());
map.setCenter(loc, 15);
}
return map;
}
function addMarker(map, latitude, longitude, html) {
var marker = new GMarker(new GLatLng(latitude, longitude));
map.addOverlay(marker);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml(html);
});
}
function displayTweets() {
$.ajax({
url:'http://weddingify.com/tweets/all?callback=?',
dataType: "jsonp",
success:function(data, textStatus, jqXHR) {
var json = jQuery.parseJSON(data);
var tweets = json.results;
for (i = 0; i < tweets.length; i++) {
var html = '<div class="market-item"><div class="avatar"><img src="' + tweets[i].userImage + '" width="40"/></div><div class="message">' + tweets[i].text + '</div></div></div>';
addMarker(map, tweets[i].latitude, tweets[i].longitude, html);
}
$('#tweetcount').html(tweets.length + "<span>local<br/>tweets</span>");
}
});
}
var map = mapView('map', 51.502652, -0.131493);
displayTweets();
});
</script>
</body>
</html>
@bybricke
Copy link

hi,
i wanna know how to make the call to "http://weddingify.com/tweets/all?callback=?" to display my TL from tweeter.

thanks in advice

@chico
Copy link
Author

chico commented Jul 25, 2011

I’ve created an example where a user’s local tweets are shown on the map – https://gist.github.com/1039016

Remember that for local tweets to show up, you have to turn your location on when tweeting - http://support.twitter.com/entries/122236 and http://support.twitter.com/groups/34-apps-sms-and-mobile/topics/171-twitter-s-mobile-website/articles/118492-how-to-tweet-with-your-location-on-mobile-devices explain how you can do this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment