basic map rendered on homepage with location markers

jameschildress · jameschildress · commit 748ad9ee0936 · 2012-11-08T09:31:41.000-05:00
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -31,7 +31,7 @@ <h1><a href="/">OpenHack</a></h1>
         <h2>Cities</h2>
         <ul id="cities">
           {% for city in site.cities %}
-            <li id="{{city.first.first}}" data-latitude="{{city.first.last.latitude}}" data-longitude="{{city.first.last.longitude}}">
+            <li class="city" id="{{city.first.first}}" data-latitude="{{city.first.last.latitude}}" data-longitude="{{city.first.last.longitude}}">
 				<a href="/{{ city.first.first }}">{{ city.first.last.name }}</a>
 			</li>
           {% endfor %}
diff --git a/javascripts/google_map.js b/javascripts/google_map.js
@@ -1,22 +1,48 @@
 $(function(){
 	
 	
-	$("#google_map").addClass("js");
-	
-	
+	// Parse city data into objects.
 	var cities = [];
-	$("ul#cities li").each(function(){
+	$("ul#cities li.city").each(function(){
 		var a, li;
 		li = $(this);
 		a = $(this).find("a");
 		cities.push({
 			name: a.text(),
 			id: li.attr("id"),
 			url: a.attr("href"),
-			lat: li.attr("data-latitude"),
-			lng: li.attr("data-longitude")
+			lat: parseFloat(li.attr("data-latitude")),
+			lng: parseFloat(li.attr("data-longitude"))
 		});
 	})
 	
 	
+	// Add the Google Map to the page.
+	var canvas = $("#google_map");
+	canvas.addClass("js");
+	var map = new google.maps.Map(canvas[0], {
+		streetViewControl: false,
+		mapTypeControl: false,
+		zoomControl: false,
+		mapTypeId: google.maps.MapTypeId.ROADMAP
+	});
+	
+	
+	// For each city, create a marker and adjust the map bounds.
+	var markers = [];
+	var bounds = new google.maps.LatLngBounds();
+	for (i in cities){
+		var city = cities[i];
+		var latlng = new google.maps.LatLng(city.lat,city.lng);
+		var marker = new google.maps.Marker({
+			position: latlng,
+			title: city.name
+		});
+		markers.push(marker);
+		marker.setMap(map);
+		bounds.extend(latlng);
+	}
+	map.fitBounds(bounds);
+	
+	
 });
