kjam/twitter_search_with_map.html

## twitter_search_with_map.html
<!DOCTYPE html>
<html>
  <head>
    <title>Twitter + Google</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      var marker, i;

      function initialize() {

        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(34.0522,-118.2428),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

        $.getJSON('http://search.twitter.com/search.json?q=Dodgers&lang=en&geocode=34.0522,-118.2428,30mi&rpp=100&callback=?',
        function(data) {
		    var data = data.results;
		    for(var i=0; i<data.length; i++) {
		        if (data[i].geo) {
		            var lat = data[i].geo.coordinates[0];
		            var lng = data[i].geo.coordinates[1];

                            var text = "<a href='http://twitter.com/" + data[i].from_user + "'>@"
                                          + data[i].from_user + "</a>: " + data[i].text;

		            marker = new google.maps.Marker({
                                 position: new google.maps.LatLng(lat,lng),
                                 map: map
                            });

                           markerInfoWindow(marker, text);
                       }
		  }
	     });

      }

      function markerInfoWindow(marker, information){
            google.maps.event.addListener(marker, 'click', function(){
                var infowindow = new google.maps.InfoWindow({
                    content: information
                });
            infowindow.open(map, marker);
            });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Twitter + Google</title>
	<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=no">
	<meta charset="UTF-8">
	<style type="text/css">
	html, body, #map_canvas {
	margin: 0;
	padding: 0;
	height: 100%;
	}
	</style>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	var map;
	var marker, i;

	function initialize() {

	var myOptions = {
	zoom: 10,
	center: new google.maps.LatLng(34.0522,-118.2428),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	map = new google.maps.Map(document.getElementById('map_canvas'),
	myOptions);

	$.getJSON('http://search.twitter.com/search.json?q=Dodgers&lang=en&geocode=34.0522,-118.2428,30mi&rpp=100&callback=?',
	function(data) {
	var data = data.results;
	for(var i=0; i<data.length; i++) {
	if (data[i].geo) {
	var lat = data[i].geo.coordinates[0];
	var lng = data[i].geo.coordinates[1];

	var text = "<a href='http://twitter.com/" + data[i].from_user + "'>@"
	+ data[i].from_user + "</a>: " + data[i].text;

	marker = new google.maps.Marker({
	position: new google.maps.LatLng(lat,lng),
	map: map
	});

	markerInfoWindow(marker, text);
	}
	}
	});

	}

	function markerInfoWindow(marker, information){
	google.maps.event.addListener(marker, 'click', function(){
	var infowindow = new google.maps.InfoWindow({
	content: information
	});
	infowindow.open(map, marker);
	});
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>

	</head>
	<body>
	<div id="map_canvas"></div>
	</body>
	</html>