oxjs/source/js/Ox.UI/Map/Ox.MapImage.js

// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.MapImage = function(options, self) {

    /**
        options
            height      image height (px)
            places      array of either names (''), points ([0, 0]),
                        or objects ({name, point, highlight})
            type        map type ('hybrid', 'roadmap', 'satellite', 'terrain')
            width       image width (px)
    */

    var self = self || {},
        that = new Ox.Element('img', self)
            .defaults({
                height: 360,
                markerColorHighlight: 'yellow',
                markerColorNormal: 'blue',
                places: [],
                type: 'satellite',
                width: 640
            })
            .options(options || {})

    $.extend(self, {
        markers: {
            highlight: [],
            normal: []
        },
        src: 'http://maps.google.com/maps/api/staticmap?sensor=false' +
                '&size=' + self.options.width + 'x' + self.options.height +
                '&maptype=' + self.options.type
    });

    if (self.options.places.length) {
        self.options.places.forEach(function(place) {
            if (Ox.isString(place)) {
                self.markers.normal.push(place);
            } else if (Ox.isArray(place)) {
                self.markers.normal.push(place.join(','));
            } else {
                self.markers[place.highlight ? 'highlight' : 'normal']
                    .push('point' in place ? place.point.join(',') : place.name)
            }
        });
        Ox.forEach(self.markers, function(markers, k) {
            if (markers.length) {
                self.src += '&markers=icon:' + 'http://dev.pan.do:8000' +
                    Ox.PATH + 'png/Ox.UI/marker' +
                    Ox.toTitleCase(self.options['markerColor' + Ox.toTitleCase(k)]) +
                    '.png|' + markers.join('|')
            }
        });
    } else {
        self.src += '&center=0,0&zoom=2'
    }

    that.attr({
        src: self.src
    });

    self.onChange = function(key, value) {
        
    };

    return that;

};