HTML geocoding

Question

jag157 0 Newbie Poster

11 Years Ago

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>

api google-api html-css javascript social-media web-design

2 Contributors
5 Replies
218 Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by LastMitch

LastMitch

11 Years Ago

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.

LastMitch

11 Years Ago

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?

<M/> commented: right +7

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jag157 0 Newbie Poster · Answer 1 · 2013-04-05T21:24:52+00:00

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(); });

LastMitch · Answer 2 · 2013-04-06T00:56:30+00:00

but it just isnt working the javascript for this is

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

jag157 0 Newbie Poster · Answer 3 · 2013-04-06T14:23:48+00:00

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?