$(function(){
// If a container for a Google Map exists on this page...
var canvas = $("#google_map");
if (canvas[0]){
// Setup the custom map markers.
var markerImage = new google.maps.MarkerImage(
"/images/map-marker.png",
new google.maps.Size(22,35),
null,
new google.maps.Point(11, 34)
);
var markerHover = new google.maps.MarkerImage(
"/images/map-marker.png",
new google.maps.Size(22,35),
new google.maps.Point(22, 0),
new google.maps.Point(11, 34)
);
var markerShadow = new google.maps.MarkerImage(
"/images/map-marker.png",
new google.maps.Size(27,35),
new google.maps.Point(44, 0),
new google.maps.Point(3, 30)
);
// Parse city data into objects.
var cities = [];
$("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: parseFloat(li.attr("data-latitude")),
lng: parseFloat(li.attr("data-longitude"))
});
})
// Add the Google Map to the page.
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,
icon: markerImage,
shadow: markerShadow
});
markers.push(marker);
marker.setMap(map);
bounds.extend(latlng);
}
// Created a city/state label for each marker.
var labels = [];
var labelPrefix = "
";
for (i in markers){
labels.push(new InfoBox({
content: labelPrefix + cities[i].name + labelSuffix,
closeBoxURL: "",
disableAutoPan: true,
boxStyle: {
width: "0",
height: "0",
overflow: "visible"
}
}));
}
// Fit the map to show all of the cities.
// Also do this whenever the browser is resized.
$(window).resize(function() {
map.fitBounds(bounds);
});
$(window).resize();
// Highlight a map marker whenever the corresponding list item is hovered.
var links = $("ul#cities li.city a");
links.hover(function(){
var link = $(this);
var index = links.index(link);
markers[index].setIcon(markerHover);
}, function(){
var link = $(this);
var index = links.index(link);
markers[index].setIcon(markerImage);
});
// When a map marker is hovered over...
// - highlight the corresponding list item
// - display a label over the marker
for (i in markers){
google.maps.event.addListener(markers[i], 'mouseover', function() {
var i = markers.indexOf(this);
this.setIcon(markerHover);
links.eq(i).addClass("highlight");
labels[i].open(map, markers[i]);
});
google.maps.event.addListener(markers[i], 'mouseout', function() {
var i = markers.indexOf(this);
this.setIcon(markerImage);
links.eq(i).removeClass("highlight");
labels[i].close();
});
}
// Click on a map marker to navigate to the page for that city.
for (i in markers){
google.maps.event.addListener(markers[i], 'click', function() {
window.location = cities[(markers.indexOf(this))].url
});
}
// Cluster map markers so that no two markers are overlapping.
var mc = new MarkerClusterer(map, markers, {
styles: [{
height: 48,
width: 48,
anchorIcon: [24, 24],
url: "/images/map-cluster.png",
textColor: "#fff",
textSize: 17,
fontFamily: "Helvetica"
}]
});
}
});