www.webdeveloper.com
Results 1 to 10 of 10

Thread: google maps and twitter geocoder hash tag support

  1. #1
    Join Date
    May 2012
    Posts
    81

    google maps and twitter geocoder hash tag support

    I am currently using this tutorial by MARCIN DZIEWULSKI to create an "INTERACTIVE GOOGLE MAP USING THE TWITTER API" ( http://tympanus.net/codrops/2011/04/...ve-google-map/ ), however i would like to expand on this tutorial by providing twitter hash (#) support. I would like to do this by placing a input field that when submitted will retrieve the users profile pic, last five tweets, and placement on the google map.

    Can anyone point me to a tutorial or provided direction on how i can accomplish this task?

    Here is my most recent code: http://jsfiddle.net/jbryant/re5Jt/13/
    Last edited by Jerrell_B; 10-04-2012 at 06:33 PM. Reason: add url to tutorial mentioned.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,086
    Hello again Jerrell,

    there were some things that annoyed me about that map, so I changed them. Maybe between the two you can see what you like:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>  
        <meta charset="utf-8" />
        <title>Sports Tweets Global</title>
        <link href="http://tympanus.net/Tutorials/InteractiveGoogleMapTwitter/css/default.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <input id="inp">
    <input value="show user" type="button" onclick="obj.twitter.show()"/>
        <div id="map"></div>
        <div class="twitter">
            <div class="inside"></div>
        </div>
    
    </body>
    <!-- JavaScript Ref -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    	<script src="http://tympanus.net/codrops/adpacks/csscustom.js"></script> 
    	    <script type="text/javascript">
    
    var map, geocoder, marker, ey, my, mouseDown = false;
    var iW= new google.maps.InfoWindow();
    var obj = {
        init: function(){
            this.map.init();
            this.twitter.click();
            this.scroll.init();
        },
         twitter:{
            show: function(){
    		$('.inside').html("");
    		if(marker){marker.setMap(null)}
    		var arr=[];
                var user=$('#inp').val();
                    $.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)
                            });
    						map.setCenter(marker.getPosition())
                            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(){
    						obj.twitter.open(map,marker);
                            });
                          }
                        });
                    });
            },
        click: function(){
            $('.twitter').find('.open').live('click', function(){
                var t = $(this), rel = t.attr('rel');
                obj.twitter.open(map,marker);
            });
        },
        open: function(map,marker){
    	var posts = $('.posts'), arr = new Array;
    	var user=$('#inp').val();
            $.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>');
                });
                html = arr.join('');
    		iW.setContent(html);
    		iW.open(map, marker);
            });
          }
       },
        map:{
            size:function(){
                var w = $(window).width(),
                    h = $(window).height();
                return {width: w, height: h}
            },
            data:{
                zoom: 3,
                center: new google.maps.LatLng(41.81,72.26),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            init: function(){
                var size = obj.map.size();
                $('#map').css({width: size.width, height: size.height*.95});
                map = new google.maps.Map(document.getElementById('map'),obj.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 = obj.scroll.mouse(e),
                    movey = y-my,
                    top = ey+movey;
                    check = obj.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 = obj.scroll.mouse(e);
                            my = mouse;
                        var element = $(this).position();
                            ey = element.top;
                        obj.scroll.update(e);
                    },
                    mousemove: function(e){
                        if(mouseDown)
                            obj.scroll.update(e);
                        return false;
                    },
                    mouseup: function(){
                        if(mouseDown)
                            mouseDown = false;
                        return false;
                    },
                    mouseleave: function(){
                        if(mouseDown)
                            mouseDown = false;
                        return false;
                    }
                });
               }        
            }
        }
    $(function(){obj.init();
        
    });
    		</script>
    </html>

  3. #3
    Join Date
    May 2012
    Posts
    81
    Hi Xelawho - Very cool!!! Thanks again! If I wanted to leave the users location on the map after searching for another user how would i go about doing that? so in other words can i leave the searched users on the map?

  4. #4
    Join Date
    Nov 2010
    Posts
    1,086
    just a couple of tweaks...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>  
        <meta charset="utf-8" />
        <title>Sports Tweets Global</title>
        <link href="http://tympanus.net/Tutorials/InteractiveGoogleMapTwitter/css/default.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <input id="inp">
    <input value="show user" type="button" onclick="obj.twitter.show()"/>
        <div id="map"></div>
        <div class="twitter">
            <div class="inside"></div>
        </div>
    
    </body>
    <!-- JavaScript Ref -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    	<script src="http://tympanus.net/codrops/adpacks/csscustom.js"></script> 
    	    <script type="text/javascript">
    
    var map, geocoder, marker, ey, my, gmarkers=[], count=0, mouseDown = false;
    var iW= new google.maps.InfoWindow();
    var obj = {
        init: function(){
            this.map.init();
            this.twitter.click();
            this.scroll.init();
        },
         twitter:{
            show: function(){
    		var arr=[];
                var user=$('#inp').val();
                    $.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)
                            });
    						count=gmarkers.length;
    						gmarkers.push(marker);
    						map.setCenter(marker.getPosition())
                            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" count="'+count+'" 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);
    						obj.twitter.addList(count)
                          }
                        });
                    });
            },
    	addList: function(num){
    	google.maps.event.addListener(gmarkers[num], 'click', function(){
    						obj.twitter.open(map,gmarkers[num]);
                            });
    	},	
        click: function(){
            $('.twitter').find('.open').live('click', function(){
                var t = $(this), cnt = t.attr('count');
                obj.twitter.open(map,gmarkers[cnt]);
            });
        },
        open: function(map,marker){
    	var posts = $('.posts'), arr = new Array;
    	var user=$('#inp').val();
            $.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>');
                });
                html = arr.join('');
    		iW.setContent(html);
    		iW.open(map, marker);
            });
          }
       },
        map:{
            size:function(){
                var w = $(window).width(),
                    h = $(window).height();
                return {width: w, height: h}
            },
            data:{
                zoom: 3,
                center: new google.maps.LatLng(41.81,72.26),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            init: function(){
                var size = obj.map.size();
                $('#map').css({width: size.width, height: size.height*.95});
                map = new google.maps.Map(document.getElementById('map'),obj.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 = obj.scroll.mouse(e),
                    movey = y-my,
                    top = ey+movey;
                    check = obj.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 = obj.scroll.mouse(e);
                            my = mouse;
                        var element = $(this).position();
                            ey = element.top;
                        obj.scroll.update(e);
                    },
                    mousemove: function(e){
                        if(mouseDown)
                            obj.scroll.update(e);
                        return false;
                    },
                    mouseup: function(){
                        if(mouseDown)
                            mouseDown = false;
                        return false;
                    },
                    mouseleave: function(){
                        if(mouseDown)
                            mouseDown = false;
                        return false;
                    }
                });
               }        
            }
        }
    $(function(){obj.init();
        
    });
    		</script>
    </html>

  5. #5
    Join Date
    May 2012
    Posts
    81
    Hi Xelawho,

    This works perfect. Certain aspects of the tutorial i used was unclear would you be able to elaborate of the code when you get a moment? You are a terrific programmer. What books and tutorials have you read and currently use? Thanks again.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,086
    Hi Jerrell,

    you're very kind. I have never read a book or taken a tutorial on javascript. I just learn by doing stuff, and seeing how other people do it. I have a soft spot for google maps because that's how I started writing javascript.

    Most of the changes that I made to that code were taking out things that were unnecessary or were getting in the way. The biggest change I made was to push the markers onto an array, here:
    Code:
    gmarkers.push(marker);
    That was mostly to do with a thing called function closure that in plain terms means that when you click a marker or the info bar at the bottom the code knows which information to put into the infowindow and where to open it up. That's also why I added the addList function to the code - it's a simple workaround to get a number (in this case the length of the gmarkers array at the time that the marker was created) and "bind" that number to the click listener for the marker. The original code didn't work with one infowindow, but rather a whole lot of hidden elements, so that was probably the biggest change.

    The rest of the code is pretty much how the guy wrote it - it seemed to work ok so I didn't look at it too much, but if there's anything that is confusing you I will see if I can explain it.

  7. #7
    Join Date
    May 2012
    Posts
    81
    Xelawho - How did you remove the transparent infoWindow from my original post and replace it with a standard infoWindow with a 'x' close button?

  8. #8
    Join Date
    May 2012
    Posts
    81
    Xelawho - I was able to figure it out through your code and google playground. Thanks

  9. #9
    Join Date
    Nov 2010
    Posts
    1,086
    from what I remember, the original went like this:
    Code:
    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();
    which I changed to this:
    Code:
    function(data){
                $.each(data, function(i, post){
                    arr.push('<div class="post">');
                    arr.push(post.text);
                    arr.push('</div>');
                });
                html = arr.join('');
    		iW.setContent(html);
    		iW.open(map, marker);
            });

  10. #10
    Join Date
    May 2012
    Posts
    81
    Hi Xelawho ,

    I noticed that the code above and on jsfiddle no longer works. I am also encountering similar problems on other Google Map projets. Do you know if google made changes to Google Maps API?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles