tomelm · March 3, 2013 21:26
diff --git a/map.html b/map.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=false"></script>
    <script type="text/javascript">
      var map;
      var mapOptions = {
        center: new google.maps.LatLng(40.4230, -98.7372),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.HYBRID
      };
      var coordinates = [
                          [33.7489,-84.3881,"Atlanta"],
                          [40.7142,-74.0064,"New York City"],
                          [37.7750,-122.4183,"San Francisco"],
                          [37.3861,-122.0828,"Mountain View"],
                          [47.6097,-122.3331,"Seattle"],
                          [36.1658,-86.7844,"Nashville"],
                          [32.7828,-96.8039,"Dallas"],
                          [35.5608,-96.8461,"Oklahoma City"]
                        ];

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        plotPoints();
      }

      function plotPoints() {
        for (i = 0, j = 0; i < coordinates.length; i++) {
          setTimeout(function() {
            var infowindow = createInfoWindow(coordinates[j][2]);
            var marker = createMarker(coordinates[j][0], coordinates[j][1], infowindow);
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });
            j++;
          }, i*200);
        }
      }

      var createMarker = function(lat, lng) {
        var latlng = new google.maps.LatLng(lat, lng); 
        var marker = new google.maps.Marker({
          animation: google.maps.Animation.DROP,
          position: latlng,
          map: map,
          title: ":poop:"
        });
        return marker;
      }

      var createInfoWindow = function(content) {
        return new google.maps.InfoWindow({
          content: content
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map_canvas { height: 100% }
	</style>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=false"></script>
	<script type="text/javascript">
	var map;
	var mapOptions = {
	center: new google.maps.LatLng(40.4230, -98.7372),
	zoom: 4,
	mapTypeId: google.maps.MapTypeId.HYBRID
	};
	var coordinates = [
	[33.7489,-84.3881,"Atlanta"],
	[40.7142,-74.0064,"New York City"],
	[37.7750,-122.4183,"San Francisco"],
	[37.3861,-122.0828,"Mountain View"],
	[47.6097,-122.3331,"Seattle"],
	[36.1658,-86.7844,"Nashville"],
	[32.7828,-96.8039,"Dallas"],
	[35.5608,-96.8461,"Oklahoma City"]
	];

	function initialize() {
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	plotPoints();
	}

	function plotPoints() {
	for (i = 0, j = 0; i < coordinates.length; i++) {
	setTimeout(function() {
	var infowindow = createInfoWindow(coordinates[j][2]);
	var marker = createMarker(coordinates[j][0], coordinates[j][1], infowindow);
	google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
	});
	j++;
	}, i*200);
	}
	}

	var createMarker = function(lat, lng) {
	var latlng = new google.maps.LatLng(lat, lng);
	var marker = new google.maps.Marker({
	animation: google.maps.Animation.DROP,
	position: latlng,
	map: map,
	title: ":poop:"
	});
	return marker;
	}

	var createInfoWindow = function(content) {
	return new google.maps.InfoWindow({
	content: content
	});
	}
	</script>
	</head>
	<body onload="initialize()">
	<div id="map_canvas" style="width:100%; height:100%"></div>
	</body>
	</html>