custom_mapping.js

if (GMap2){
  GMap2.prototype.centerAndZoomOnBounds = function(bounds) {
    this.setCenter(bounds.getCenter(), this.getBoundsZoomLevel(bounds));
  };
}
(function($){
  $.mapping = function(places, info_html_template, location_link_template){
    $.mapping.location_link_template = $.template(location_link_template);
    $.mapping.info_html_template = $.template(info_html_template);
    
    if (GBrowserIsCompatible()) {
      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.setMapType(G_NORMAL_MAP);
      map.addControl(new GSmallMapControl());
      map.centerAndZoomOnBounds($.mapping.getBounds(places));

      // Add the markers
      $.each(places, function(){
        var marker = $.mapping.createMarker(this);
        map.addOverlay(marker);
      });

      // Attach the click events to the links in the sidebar.
      $('a.map_item').live('click', function(e){
        e.preventDefault();
        var marker_index = parseInt($(this).attr('href').split('#')[1], 10);
        GEvent.trigger($.mapping.gmarkers[marker_index], "click");
      });
    }
  };
  
  $.extend($.mapping, {
    gmarkers: [],
    location_link_template: '',
    info_html_template: '',
    makeGLatLng: function(place){
      return new GLatLng(place.point.lat, place.point.lng);
    },
    getBounds: function(places){
      var bounds = new GLatLngBounds($.mapping.makeGLatLng(places[0]), $.mapping.makeGLatLng(places[0]));
      for (var i=1, len = places.length ; i<len; i++) {
        bounds.extend($.mapping.makeGLatLng(places[i]));
      }
      return bounds;
    },
    chooseIconOptions: function(category){
      switch(category){
        case 'communities-of-color':
          return {primaryColor: '#FF00FF'};
          break;
        case 'cross-population':
          return {primaryColor: '#33FFFF'};
          break;
        case 'women':
          return {primaryColor: '#0000CC'};
          break;
        case 'young-people':
          return {primaryColor: '#CCCCCC'};
          break;
        default:
          return {primaryColor: '#CC0000'};
          break;
      }
    },
    createMarker: function(place){
      var point = $.mapping.makeGLatLng(place);
      var custom_icon = MapIconMaker.createMarkerIcon($.mapping.chooseIconOptions(place.category));
      var marker = new GMarker(point, {icon: custom_icon});
      
      // bind the info HTML to the marker
      var info_html = $.mapping.info_html_template.apply({
        title: place.name, 
        history: place.history, 
        focus: place.focus,
        url: place.url
      });
      marker.bindInfoWindowHtml(info_html, {maxWidth: 425});
      $.mapping.gmarkers.push(marker);
      
      // add a line to the side_bar html
      $('#side_bar').append($.mapping.location_link_template, {
        name: place.name, id: ($.mapping.gmarkers.length-1),
        history: place.history, focus: place.focus,
        url: place.url
      });
      
      return marker;
    }
  };
})(jQuery);

places.js

$(document).ready(function(){
  var myPlaces = [
    { point: {lat: 43.65654, lng: -79.90138}, 
      name: "This Place", category: 'blah',
      history: "Some History" },
    { point: {lat: 43.91892, lng: -78.89231}, 
      name: "Some Other Place", category: 'bogus',
      history: "More History"},
    { point: {lat: 43.82589, lng: -78.89231}, 
      name: "Another Place", category: 'something',
      history: "Weird History"}
  ];
  
  $.mapping(myPlaces, "${title}<br />History: ${history}", '<a href="#${id}" class="map_item">${name}</a><br />');
});