mapbox - google maps box on the fly

mapbox.js

/*
    Simple MapBox to show Google Maps


    mapBox.setLatLng(0, 0);
    mapBox.mapOptions.zoom = 16;
    mapBox.addMarker(0, 0, {
        url : '/images/marker.png',
        anchorX : 15,
        anchorY : 30,
        width : 30,
        height: 30
    });
    mapBox.show();
*/

var MapBox = function(){
    var _this = this;

    // Set variables:
    this.latLng         = new google.maps.LatLng(0, 0);     // LatLng from google maps:
    this.initialized    = false;
    this.map;                                           // Google maps object
    this.mapOptions = {
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };                                                  // Object met map options
    this.markers = [];                                  // Array with marker information

    // Create overlay:
    this.overlay = document.createElement('div');
    this.overlay.id  = 'mapbox-overlay';
    this.overlay.style.position = 'fixed';
    this.overlay.style.left = this.overlay.style.top = this.overlay.style.right = this.overlay.style.bottom = '0px';
    this.overlay.style.zIndex     = 1000;
    this.overlay.style.cursor     = 'pointer';
    this.overlay.style.display    = 'none';
    document.body.appendChild(this.overlay);

    // Create the map wrapper:
    this.mapWrapper = document.createElement('div');
    this.mapWrapper.id = 'mapbox-wrapper';
    this.mapWrapper.style.position = 'fixed';
    this.overlay.appendChild(this.mapWrapper);

    // Create map element:
    this.mapElement = document.createElement('div');
    this.mapElement.id = 'mapbox-map';
    this.mapWrapper.appendChild(this.mapElement);

    // Add a listener the hide the mapbox
    if(document.addEventListener)
    {
        this.overlay.addEventListener('click', function(e){
            e.preventDefault();
            if(e.target.id == 'mapbox-overlay')
            {
                _this.hide();
            }
        });
    } else {
        this.overlay.attachEvent('onclick', function(e){
            if(e.srcElement.id == 'mapbox-overlay')
            {
                _this.hide();
            }
            return false;
        });
    }

    /**
     * Set the Latitude and Longitude
     * @param lat
     * @param lng
     */
    this.setLatLng = function(lat, lng)
    {
        _this.latLng = new google.maps.LatLng(lat, lng);
    };

    /**
     * Show the map
     */
    this.show = function()
    {
        this.overlay.style.display = 'block';
        // Only initialize when visible:
        if(!this.initialized)
        {
            _this.initialize();
        }
    };

    /**
     * Hide the map
     */
    this.hide = function()
    {
        this.overlay.style.display = 'none';
    };

    /**
     * Initialize the map
     */
    this.initialize = function()
    {
        // Create the map:
        _this.map = new google.maps.Map(_this.mapElement, _this.mapOptions);
        _this.map.setCenter(_this.latLng);
        // Add the markers:
        for(var i in _this.markers)
        {
            var m = _this.markers[i];
            var myLatLng = new google.maps.LatLng(m.lat, m.lng);
            new google.maps.Marker({
                position: myLatLng,
                map: _this.map,
                icon: {
                    url    : m.image.url,
                    origin : new google.maps.Point(0, 0),
                    size   : new google.maps.Size(m.image.width, m.image.height),
                    anchor : new google.maps.Point(m.image.anchorX, m.image.anchorY)
                }
            });
        }
        _this.initialized = true;
    };

    /**
     * Add a marker to the map
     * @param lat
     * @param lng
     * @param image
     * @param popupText
     */
    this.addMarker = function(lat, lng, image, popupText)
    {
        _this.markers.push({lat:lat, lng:lng, image:image, popupText:popupText});
    }

};