Map V3 tests

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<form id="create_map">
    <label for="width">Width:</label>
    <input type="text" value="680" name="width" id="width" />
    <label for="height">Height:</label>
    <input type="text" value="380" name="height" id="height" />
    <input type="submit" value="Initialize map" />

    <br />

    <input type="button" value="Add events to map" id="add_map_events" />
    <input type="button" value="Remove events from map" id="remove_map_events" />
</form>

<form id="markers_form">
    <label for="markers">Markers:</label>
    <input type="text" value="50" name="markers" id="markers" />

    <input type="submit" value="Add markers" />

    <br />

    <input type="button" value="Clear markers" id="clear_markers" />
    <input type="button" value="Add events to markers" id="add_marker_events" />
    <input type="button" value="Remove events from markers" id="remove_marker_events" />
</form>

<div id="map"></div>

Log: <br/>
<textarea id="log"></textarea>

CSS

#log {
    width: 100%;
    height: 200px;
}

JavaScript

$(function () {
    var mapForm = $('#create_map'),
        markersForm = $('#markers_form'),
        mapContainer = $('#map'),
        logArea = $('#log');

    var map, infowindow, markers = [];

    var log = function (text) {
        logArea.val(text + "\n" + logArea.val());
    };

    var initializeMap = function(width, height) {
        log('--- INITIALIZING MAP ---');

        mapContainer.width(width).height(height);

        google.maps.visualRefresh = true;

        map = new google.maps.Map(mapContainer[0], {
          center: {lat: 45.518, lng: -122.672},
          zoom: 18,
          mapTypeId: 'satellite'
        });

        infowindow = new google.maps.InfoWindow();
    };

    var mapEvents = [ 'bounds_changed', 'center_changed', 'click', 'dblclick', 'drag', 'dragend', 'dragstart',
        'heading_changed', 'idle', 'maptypeid_changed', 'mousemove', 'mouseout', 'mouseover', 'projection_changed',
        'resize', 'rightclick', 'tilesloaded', 'tilt_changed', 'zoom_changed' ];

    var addMapEvents = function() {
        log('--- ADDING ALL EVENTS TO MAP ---');

        for (var i in mapEvents) {
            (function () {
                var event = mapEvents[i];

                google.maps.event.addListener(map, event, function () {
                    log('Map fired: ' + event);
                });
            })();
        }
    };

    var clearMapEvents = function() {
        log('--- CLEARING ALL EVENTS FROM MAP ---');

        for (var i in mapEvents) {
            google.maps.event.clearListeners(map, mapEvents[i]);
        }
    };

    mapForm.on('submit', function (event) {
        event.preventDefault();
        initializeMap(mapForm.find('[name="width"]').val(), mapForm.find('[name="height"]').val());
    });
    mapForm.find('#add_map_events').on('click', addMapEvents);
    mapForm.find('#remove_map_events').on('click', clearMapEvents);

    var clearMarkers = function () {
        log('--- CLEARING MARKERS ---');
        for (var...