Map Populator

gistfile1.js

/**
 * Create a google map and populate it with markers and infoboxes
 *
 * @requires underscore.js @link http://documentcloud.github.com/underscore/
 * @param options {object} Override default settings
 * @return {object} this
 */
var MapPopulator = function (options) {

    var defaults = {
        map: undefined, // {object} map DOM object
        locations: undefined, // {array} list of locations to plot
        animation: google.maps.Animation.DROP, // Set to null to disable animations
        map_options: {},
        interval: 50, // {int} Milliseconds between pin drops

        // {function|string} path to image to use for marker icon,
        // or a function to return a dynamic icon
        marker: 'marker.png',

        // {function} Render the template for infobox
        render: function (location) {
            return '';
        }
    }
    this.settings = _.extend(defaults, options);

    // Basic validation
    if (!(this.settings.map && this.settings.locations)) {
        throw new Error('You must specify map AND locations');
    }

    // Populate map
    var options = _.extend({
        zoom: 15,
        center: new google.maps.LatLng(53.4816793, -2.2329525), // Manchester, UK
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }, this.settings.map_options);
    this.map = new google.maps.Map(this.settings.map, options);

    this.infobox = this.create_infobox();
    this.plot(this.settings.locations);

    return this;
}

/**
 * Plot markers on map and add click event for infobox popup
 *
 * @param location {Array} list of locations to plot
 * @return {void}
 */
MapPopulator.prototype.plot = function (locations) {
    var this_ = this, i = 0;

    locations.forEach(function (location) {
        setTimeout(function () {
            // Check for backbone.js attributes first, else pass full object
            var marker = this_.marker(location.attributes || location);

            // Popup info 'bubble' when clicked
            google.maps.event.addListener(marker, 'click', function() {
                // Cache infobox content
                marker.html = this_.settings.render(location);

                this_.infobox.setContent(marker.html);
                this_.infobox.open(this.map, this);
            });
        }, i++ * this_.settings.interval);
    });
}

/**
 * Plot individial marker on map
 *
 * @param location {object} [requires min: latitude, longitude, name]
 * @return {object} google.maps.Marker
 */
MapPopulator.prototype.marker = function (location) {
    var marker = this.settings.marker;

    return new google.maps.Marker({
        position: new google.maps.LatLng(location.latitude, location.longitude), 
        map: this.map, 
        title: location.name,
        icon: typeof(marker) === 'function' ? marker(location) : marker,
        animation: this.settings.animation
    });
}

/**
 * Popup bubble, a single infobox is used for all points, and populated
 * with relevant content which the marker is clicked.
 *
 * @return {object} InfoBox
 */
MapPopulator.prototype.create_infobox = function () {
    return new InfoBox({
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(16, -24),
        zIndex: null,
        // closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        isHidden: false,
        pane: 'floatPane',
        enableEventPropagation: false
    });
}