tinyMap : click map to modify circle

Click on the map the regenerate the new circle.

by essoduke chang

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=zh-TW"></script>
<script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-2.7.6.min.js"></script>
<div id="map"></div>

CSS

#map{width:640px;height:480px}

JavaScript

$(function () {

    var map = $('#map');
    
    map.tinyMap({      
        center: {
            'x': '25.038', 
            'y': '121.56399999999996'
        },
        zoom: 13,
        circle: [{
            'center': {
                'x': '25.047924',
                'y': '121.51708099999996'
            },
            'radius': 500,
            'width': 1,
            'color': '#333333',
            'fillcolor': '#999999'            
        }],
        event: function () {
            map.tinyMap('clear', 'circle')
               .tinyMap('modify', {
                   circle: [{
                       'center': {
                           'x': '25.038',
                           'y': '121.56399999999996'
                        },
                        'radius': 400,
                        'widrth': 3,
                        'color': '#FF0000',
                        'fillcolor': '#CC0000'
                   }]
               });
        }
    });
});