I have a problem, create script like mailmaips.nl, I try and write some script see below but main feature not work, I want to add circle when i click button. please help. <!DOCTYPE html><head></script><script type="%7D']http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head><body><div id="map-canvas" style="text-align:left;"></div><div id="info"></div><div id='geocode'><br /><input type="submit" value="Submit" id="geosubmit" /></div></body></html><script type="text/javascript"> function DistanceWidget(map) { this.set('map', map); this.set('position', map.getCenter()); var marker = new google.maps.Marker({ draggable: true }); marker.bindTo('map', this); marker.bindTo('position', this); var radiusWidget = new RadiusWidget(); radiusWidget.bindTo('map', this); radiusWidget.bindTo('center', this, 'position'); this.bindTo('distance', radiusWidget); this.bindTo('bounds', radiusWidget); } DistanceWidget.prototype = new google.maps.MVCObject(); function RadiusWidget() { var circle = new google.maps.Circle({ fillColor: '#efefef', fillOpacity: 0.5, strokeColor: '#000', strokeOpacity: 1.0, strokeWeight: 2 }); this.set('distance', 5); this.bindTo('bounds', circle); circle.bindTo('center', this); circle.bindTo('map', this); circle.bindTo('radius', this); this.addSizer_(); } RadiusWidget.prototype = new google.maps.MVCObject(); RadiusWidget.prototype.distance_changed = function() { this.set('radius', this.get('distance') * 1000); }; RadiusWidget.prototype.addSizer_ = function() { var sizer = new google.maps.Marker({ draggable: true }); sizer.bindTo('map', this); sizer.bindTo('position', this, 'sizer_position'); var me = this; google.maps.event.addListener(sizer, 'drag', function() { me.setDistance(); }); }; RadiusWidget.prototype.center_changed = function() { var bounds = this.get('bounds'); if (bounds) { var lng = bounds.getNorthEast().lng(); var position = new google.maps.LatLng(this.get('center').lat(), lng); this.set('sizer_position', position); } }; RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) { if (!p1 || !p2) { return 0; } var R = 6371; var dLat = (p2.lat() - p1.lat()) * Math.PI / 180; var dLon = (p2.lng() - p1.lng()) * Math.PI / 180; var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return d; }; RadiusWidget.prototype.setDistance = function() { var pos = this.get('sizer_position'); var center = this.get('center'); var distance = this.distanceBetweenPoints_(center, pos); var distance = Math.round(distance * 100) / 100 this.set('distance', distance); }; function init() { var mapDiv = document.getElementById('map-canvas'); var geocoder = new google.maps.Geocoder(); var map = new google.maps.Map(mapDiv, { center: new google.maps.LatLng(51.5001524, -0.1262362), zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Multiple Markers var markers = [ ['', 51.503454,-0.119562], ['', 51.499633,-0.124755], ['', 51.499633,-0.123755], ['', 51.499633,-0.154755], ['', 51.499633,-0.164755] ]; icon='http://maps.google.com/mapfiles/marker_yellow.png'; for( i = 0; i < markers.length; i++ ) { var position = new google.maps.LatLng(markers[1], markers[2]); marker = new google.maps.Marker({ position: position, map: map, title: markers[0], icon:icon }); } var distanceWidget = new DistanceWidget(map); var mySubmit = document.getElementById('geosubmit'); var myGeoInfo = document.getElementById('q'); mySubmit.onclick = function() { geocoder.geocode({ address: myGeoInfo.value }, function(responses) { if (responses && responses.length > 0) { var newMarkerPos = new google.maps.LatLng(responses[0].geometry.location.lat(), responses[0].geometry.location.lng()); distanceWidget.set('position', newMarkerPos); distanceWidget.map.setCenter(newMarkerPos); } else { alert('error getting geocode'); } }); } google.maps.event.addListener(distanceWidget, 'distance_changed', function() { displayInfo(distanceWidget); }); google.maps.event.addListener(distanceWidget, 'position_changed', function() { displayInfo(distanceWidget); }); mapDiv.style.width = "800px"; mapDiv.style.height = "400px"; } function displayInfo(widget) { var info = document.getElementById('info'); info.innerHTML = 'Position: ' + widget.get('position') + '<br />' + 'Distance: ' + widget.get('distance') + '<br />' + 'Bounds: ' + widget.get('bounds'); } google.maps.event.addDomListener(window, 'load', init); </script>z<script type="text/javascript"> /* Orginal Page: http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar */ //jQuery time var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches $(".next").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs from the right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'transform': 'scale('+scale+')'}); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); //show the previous fieldset previous_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale previous_fs from 80% to 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs to the right(50%) - from 0% left = ((1-now) * 50)+"%"; //3. increase opacity of previous_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".submit").click(function(){ return false; }) </script> Code (markup):