Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Geolocation and Twitter Search API

    Hi, In a book i've just bought it has an example of the Twitter search api, the example should find the users location then plot local tweets on a map.

    The problem however is that it does not work. I just get a map of the USA. I've tried reading through the code and looking for any errors but to no avail. I've even looked for updated examples but to get them i'll have to buy the eBook (which seeing as i forked out for the paper based, i find a total con).

    Could someone please help me? I know it's a big ask but you don't get if you don't ask right?

    ... oh and lastly, if it's of any importance, the does say its okay to use their code for whatever you wish, so there's no copyright infringement or anything here.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7"/>
    <meta http-equiv="viewport" content="initial-scale=1, maximum-scale=1,
    user-scalable=no"/>
    <title>Tweets Near Me</title>
    <style type="text/css">
    html {
    	height: 100%
    }
    body {
    	height: 100%;
    	margin: 0;
    	padding: 0
    }
    #map {
    	height: 100%
    }
    .tweet_info {
    	border: 1px solid #000;
    	padding: 15px;
    	width: 300px
    }
    .tweet_info img {
    	float: right;
    	height: 48px;
    	margin: 0 0 10px 10px;
    	width: 48px
    }
    .tweet_info h3 {
    	margin-bottom: 10px
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
    </script>
    <script type="text/javascript" src="jquery.timer.js"></script><script type="text/javascript">
    var map = null;
    var browserSupport = false;
    var attempts = 0;
    var tweets = [];
    var tweetsQ = [];
    var refreshQuery = '?q=';
    var infoWindow = new google.maps.InfoWindow();
    /* This is called once the page has loaded */ function initMap() {
    /* Set all of the options for the map */ var options = {
    zoom: 4,
    center: new google.maps.LatLng(38.6201, -90.2003),
    mapTypeId: google.maps.MapTypeId.ROADMAP };
    /* Create a new Map for the application */
    map = new google.maps.Map(document.getElementById('map'), options);
    /* Set up timers to collect tweets */ $(document).everyTime('30s', acquireTweets); $(document).everyTime('100ms', parseTweetsQ);
    /* Add Geolocation */
    getLocation(); }
    /*
    * If the W3C Geolocation object is available then get the current * location, otherwise report the problem
    */
    function getLocation() {
    /* Check if the browser supports the W3C Geolocation API */ if (navigator.geolocation) {
    browserSupport = true; navigator.geolocation.getCurrentPosition(function(position) {
    plotLocation(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    
    }, reportProblem, { timeout: 45000 }); } else
    reportProblem(); }
    /* Create the URL that will call the Search API REST end point */ function createTweetSearchURL() {
    var temp = map.getCenter();
    return 'http://search.twitter.com/search.json' + refreshQuery + '&geocode=' + temp.lat() + '%2C' + temp.lng() + '%2C50km&rpp=100&callback=?';
    }
    /* Plot the location on the map and zoom to it, then get tweets */ function plotLocation(latLng) {
    attempts = 0;
    map.setCenter(latLng); map.setZoom(11);
    var marker = new google.maps.Marker({
    position: latLng,
    icon: 'http://geo.holdener.com/images/myloc.png', animation: google.maps.Animation.DROP
    }); marker.setMap(map);
    acquireTweets(); }
    /*
    * Call the Twitter Search API and cycle through results, pushing tweets * into the tweets queue
    */
    function acquireTweets() { $.getJSON(createTweetSearchURL(), function(data) {
    if (data.results)
    $.each(data.results, function(i, tweet) {
    if (tweet.geo || tweet.location)
    tweetsQ.push(tweet); });
    refreshQuery = data.refresh_url; });
    }
    /* Parse through the queue and plot any tweets that have coordinates */ function parseTweetsQ() {
    if (tweetsQ.length > 0) { var tweet = tweetsQ.pop();
    /* Check to see if there are coordinates */ if (tweet.geo) {
    tweet.latlng = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
    
    plotTweet(tweet); }
    } }
    /* Create the content for the information pop up window */ function createInfoContent(tweet) {
    var retval = '';
    retval += '<div class="tweet_info">';
    retval += '<img alt="' + tweet.from_user_id + '" src="' +
    tweet.profile_image_url + '" class="tweet_profile"/>'; retval += '<h3>' + tweet.from_user + '</h3>';
    retval += '<p>' + tweet.text + '</p>';
    retval += '<p>Source: <a href="' + tweet.source + '"/>' +
    tweet.source + '</a></p>'; retval += '</div>';
    return retval;
    }
    /*
    * Plot the tweet on the map, and add the /click/ event to show * the /infoWindow/
    */
    function plotTweet(tweet) {
    tweet.marker = new google.maps.Marker({
    position: tweet.latlng,
    icon: 'http://geo.holdener.com/images/tweet.png', animation: google.maps.Animation.DROP,
    title: tweet.from_user,
    html: createInfoContent(tweet)
    });
    google.maps.event.addListener(tweet.marker, 'click', function() {
    infoWindow.setContent(this.html);
    infoWindow.open(map, this); });
    tweet.marker.setMap(map); /*
    * If there are more than 100 tweets on the map, remove the oldest * one from the map
    */
    if (tweets.length > 100) { var tweet = tweets.shift();
    tweet.marker.setMap(null); }
    }
    /* Report any errors using this function */ function reportProblem(e) {
    /* Is this a support issue or an API issue? */ if (browserSupport) {
    switch (e.code) {
    case e.PERMISSION_DENIED:
    alert('You have denied access to your position. You will ' +
    'not get the most out of the application now.'); break;
    case e.POSITION_UNAVAILABLE:
    alert('There was a problem getting your position.'); break;
    case e.TIMEOUT:
    /* Three changes to get the location before a true timeout */ if (++attempts < 3) {
    navigator.geolocation.getCurrentPosition(plotLocation,
    reportProblem); } else
    alert('The application has timed out attempting to get ' +
    'your location.'); break;
    default:
    alert('There was a horrible Geolocation error that has ' +
    'not been defined.');
    }
    } else
    alert('Geolocation is not supported by your browser.'); }
    $(document).ready(initMap); </script>
    </head>
    <body>
    <div id="map"></div>
    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    do you have the timer.js file in the correct directory?

    the other thing is that the icon files are dead links - you'll have to replace them:
    http://geo.holdener.com/images/myloc.png
    http://geo.holdener.com/images/tweet.png


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •