google maps and twitter geocoder hash tag support

This site is best viewed in a modern browser with JavaScript enabled.

google maps and twitter geocoder hash tag support

Jerrell_B

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/13/interactive-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/

xelawho

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:

<!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>

Jerrell_B

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?

xelawho

just a couple of tweaks...

<!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>

Jerrell_B

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.

xelawho

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:

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.

Jerrell_B

Xelawho - How did you remove the transparent infoWindow from my original post and replace it with a standard infoWindow with a 'x' close button?

Jerrell_B

Xelawho - I was able to figure it out through your code and google playground. Thanks

xelawho

from what I remember, the original went like this:

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:

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

Jerrell_B

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?