0

Hi i am trying to geocode tweets to a google map i have all my code in place but it just isnt loading up my tweets its just showing the map here is my html code can anyone tell me where i am going wrong thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Interactive Google Map using the Twitter API</title>
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script src="js/init.js" type="text/javascript"></script>
</head>

<body>
    <div id="map"></div>
    <div class="twitter">
        <div class="inside"></div>
    </div>
    <div class="posts"></div>
    <div class="get">
        <input type="hidden" value="MiddlesexUni" />
        <input type="hidden" value="Jag157" />
        <input type="hidden" value="iBainsy" />  
        <input type="hidden" value="twi" />          
        <input type="hidden" value="dillang" />
        <input type="hidden" value="guvvibains" />   
        <input type="hidden" value="GurpsKandola" /> 
        <input type="hidden" value="Arjunnnn" />
    </div>
</body>
</html>
2
Contributors
5
Replies
40
Views
5 Years
Discussion Span
Last Post by LastMitch
0

but it just isnt loading up my tweets its just showing the map here is my html code can anyone tell me where i am going wrong thanks

This is more like a Javascript issue rathar than a CSS issue. CSS can't load a tweet.

0

im followin a tutorial

http://tympanus.net/codrops/2011/04/13/interactive-google-map/comment-page-1/#comments

but it just isnt working the javascript for this is

var map, geocoder, marker,
    ey, my, mouseDown = false;
var o = {
    init: function(){
        this.map.init();
        this.twitter.show();
        this.twitter.click();
        this.scroll.init();
    },
    twitter: {
        get: function(){
            var arr = new Array;
            $('.get').find('input').each(function(i){
                var t = $(this), 
                    val = t.val();
                arr[i] = val;               
            });
            return arr;
        },
        show: function(){
            var users = o.twitter.get(), arr = new Array;
            for (i in users){
                var user = users[i];
                $.getJSON('http://twitter.com/users/show/'+user+'.json?callback=?', function(data) {
                    var img = data.profile_image_url,
                        screen_name = data.screen_name;
                    geocoder.geocode({ address: data.location }, function(response, status){
                        if (status == google.maps.GeocoderStatus.OK) {
                            var x = response[0].geometry.location.lat(),
                                y = response[0].geometry.location.lng();
                            marker = new google.maps.Marker({
                                icon: img,
                                map: map,
                                title: screen_name,
                                position: new google.maps.LatLng(x, y)
                            });
                            arr.push('<div class="item">');
                            arr.push('<p class="img"><a href="#" class="open" rel="'+screen_name+'"><img src="'+img+'" alt="" /></a></p>');
                            arr.push('<div class="entry">');
                            arr.push('<a href="#" class="open title" rel="'+screen_name+'">'+data.name+'</a>');
                            arr.push('<p class="description">'+data.description+'</p>');
                            arr.push('<p class="url"><a href="'+data.url+'" target="_blank">'+data.url+'</a></p>');
                            arr.push('<p class="count">Followers: '+data.followers_count+', Following: '+data.friends_count+'</p>');
                            arr.push('</div>');
                            arr.push('</div>');
                            var html = arr.join('');
                            arr = [];
                            $('.twitter').find('.inside').append(html);
                            google.maps.event.addListener(marker, 'click', function(){
                                o.twitter.open(this.title);
                            }); 
                        }
                    });
                });
            }
        },
        click: function(){
            $('.twitter').find('.open').live('click', function(){
                var t = $(this), rel = t.attr('rel');
                o.twitter.open(rel);
            });
        },
        open: function(user){
            var posts = $('.posts'), arr = new Array;
            $.getJSON('http://twitter.com/status/user_timeline/'+user+'.json?count=5&callback=?', function(data) {
                $.each(data, function(i, post){
                    arr.push('<div class="post">');
                    arr.push(post.text);
                    arr.push('</div>');
                });
                var html = arr.join('');
                posts.html(html).fadeIn();
            });
        }
    },
    map: {
        size: function(){
            var w = $(window).width(),
                h = $(window).height();
            return { width: w, height: h }
        },
        data: {
            zoom: 3,
            center: new google.maps.LatLng(52, 23),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        init: function(){
            var size = o.map.size();
            $('#map').css({ width: size.width, height: size.height });
            map = new google.maps.Map(document.getElementById('map'), o.map.data),
            geocoder = new google.maps.Geocoder();
            google.maps.event.addListener(map, 'dragstart', function(){
                $('.posts').hide();
            }); 
        }
    },
    scroll: {
        mouse: function(e){
            var y = e.pageY; 
            return y;
        },
        check: function(y){
            var all = $('.twitter').height(),
                inside = $('.twitter').find('.inside').height();
            if (y < (all - inside)) {
                y = all - inside;
            } else if (y > 0) {
                y = 0;
            }
            return y;
        },
        update: function(e){
            var y = o.scroll.mouse(e),
                movey = y-my,
                top = ey+movey;
                check = o.scroll.check(top);
            $('.twitter').find('.inside').css({ top: check+'px' });
        },
        init: function(){
            $('.twitter').find('.inside').bind({
                mousedown: function(e){
                    e.preventDefault();
                    mouseDown = true;
                    var mouse = o.scroll.mouse(e);
                        my = mouse;
                    var element = $(this).position();
                        ey = element.top;
                    o.scroll.update(e);
                },
                mousemove: function(e){
                    if (mouseDown)
                        o.scroll.update(e);
                    return false;
                },
                mouseup: function(){
                    if (mouseDown)
                        mouseDown = false;
                    return false;
                },
                mouseleave: function(){
                    if (mouseDown)
                        mouseDown = false;
                    return false;
                }
            });
        }
    }
}

$(function(){ o.init(); });
0

but it just isnt working the javascript for this is

Did you change the code? What jQuery version are you using?

0

no i havent his demo isnt also working its just showing a map so im guessing the API somewhere has changed or am i wrong?

1

no i havent his demo isnt also working its just showing a map so im guessing the API somewhere has changed or am i wrong?

What is the issue? You have to be more specific what is not working.

You can't say the javascript is not working because it's not really helpful. You have to pinpoint he issue.

Interactive Google Map using the Twitter API

This is code works on my computer but it's really for people who wants Twitter API

What files did you include top of your header?

Votes + Comments
right
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.