google maps cirkel

// global vars, we need them all over the app
        var distanceWidget;
        var radiusWidget;
        var map;
        var geocoder;
        var perimeterMin = 5;
        var perimeterMax = 100;
        var perimeterDefault = 30;
      
      function sliderIcon() {
        return new google.maps.MarkerImage(
          'Images/resize-off.png',
          // size
          new google.maps.Size(16, 16),
          // The origin for this image
          new google.maps.Point(0,0),
          // The anchor for this image
          new google.maps.Point(8, 8)
        );
      }
      function dartIcon() {
        return new google.maps.MarkerImage(
          'Images/icon_dart4.png',
          // size
          new google.maps.Size(47, 41),
          // The origin for this image
          new google.maps.Point(0,0),
          // The anchor for this image
          new google.maps.Point(24,24)
        );
      }

      $(document).ready(function(){
        geocoder = new google.maps.Geocoder();

        var center =  new google.maps.LatLng(52.093271,5.121850);
        var zoom = 8;
        var mapDiv;
        
        function init() {
          mapDiv = document.getElementById('mapcanvas');
          map = new google.maps.Map(mapDiv, {
            center: center,
            zoom: zoom,
            mapTypeControl: false,
            streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            });
          distanceWidget = new DistanceWidget(map, updateMarkerAddress);
          
          google.maps.event.addListener(distanceWidget, 'distance_changed', function(e) {
            display();
            //$("#controls #perimeter_distance").val(radiusWidget.distance);
          });
          google.maps.event.addListener(distanceWidget, 'position_changed', function(e) {
                //geocodePosition(distanceWidget.position);            
            display();
            //$("#controls #perimeter_center").val(distanceWidget.position);
          });

        
          
          display();
          geocodePosition(center);
          
        }
  
        google.maps.event.addDomListener(window, 'load', init);
        
      });
      
      function display() {
        $("#controls #perimeter_distance_html").val(radiusWidget.distance);
        $("#controls #perimeter_distance_value").html(radiusWidget.distance);
           $("#controls #perimeter_center_lat").val(distanceWidget.position.lat().toString() );
           $("#controls #perimeter_center_lng").val(distanceWidget.position.lng().toString() );
           

        $("#controls #perimeter_north").val(radiusWidget.circle.getBounds().getNorthEast().lat());
        $("#controls #perimeter_east").val(radiusWidget.circle.getBounds().getNorthEast().lng());
        $("#controls #perimeter_south").val(radiusWidget.circle.getBounds().getSouthWest().lat());
        $("#controls #perimeter_west").val(radiusWidget.circle.getBounds().getSouthWest().lng());         

        }
        
        function updateMarkerAddress(str) {
          $("#controls #perimeter_postal").val(str);
                    
        }
        
         function geocodePosition(pos) {
          geocoder.geocode({
            latLng: pos
          }, function(responses) {
            if (responses && responses.length > 0) {
              var city = addresComponent('locality', responses[0])
              var postal_code = addresComponent('postal_code', responses[0])
              
              
              if (postal_code) {
                updateMarkerAddress(postal_code);
              }
              else {
                updateMarkerAddress('Onbekend');
              }
              
            }
            else {
              updateMarkerAddress('Onbekend');
            }
            
            if (city) {
                updateMarkerCity(city);
              }
              else {
                updateMarkerCity('Onbekend');
              }
    
          });
        }
        
        function updateMarkerCity(str) {
  document.getElementById('locality').innerHTML = str;
}
        /**
        *   geocodeResponse is een object vol adres-gegevens.  
        *   We gaan in die gegevens vissen naar een gegeven dat overeen komt met de parameter "type".
        *  
        *   bv. type = 'postal_code' =>
        *   geocodeResponse.address_components[5].types[1] = 'postal_code'
        *   geocodeResponse.address_components[5].long_name = '8310'
        */
        function addresComponent(type, geocodeResponse) {
          for(var i=0; i < geocodeResponse.address_components.length; i++) {
            for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) {
              if (geocodeResponse.address_components[i].types[j] == type) {
                return geocodeResponse.address_components.long_name;
              }
            }
          }
          return '';
        }
    
      /**
       * A distance widget that will display a circle that can be resized and will
       * provide the radius in km.
       *
       * @param {google.maps.Map} map The map to attach to.
       *
       * @constructor
       */
      function DistanceWidget(map) {
        this.set('map', map);
        //this.set('updateMarkerAddress', updateMarkerAddress_callback);
        this.set('position', map.getCenter());

        var marker = new google.maps.Marker({
          draggable: true,
          title: 'Verplaats me naar een zoekgebied in Nederland!',
          icon: dartIcon()
        });
        
        google.maps.event.addListener(marker, 'dragend', function(e) {
            geocodePosition(distanceWidget.position);
        });


        // Bind the marker map property to the DistanceWidget map property
        marker.bindTo('map', this);

        // Bind the marker position property to the DistanceWidget position
        // property
        marker.bindTo('position', this);

        // Create a new radius widget
        radiusWidget = new RadiusWidget();

        // Bind the radiusWidget map to the DistanceWidget map
        radiusWidget.bindTo('map', this);

        // Bind the radiusWidget center to the DistanceWidget position
        radiusWidget.bindTo('center', this, 'position');

        // Bind to the radiusWidgets' distance property
        this.bindTo('distance', radiusWidget);

        // Bind to the radiusWidgets' bounds property
        this.bindTo('bounds', radiusWidget);
      }
      DistanceWidget.prototype = new google.maps.MVCObject();


      /**
       * A radius widget that add a circle to a map and centers on a marker.
       *
       * @constructor
       */
      function RadiusWidget() {
        /**
       * nieuwe code
       */
        
        if (updateMarkerAddress('Onbekend')){
            hex = '#FF0000';
        }
        else{
            hex = '#007A98';
        }
        var circle = new google.maps.Circle({
          strokeWeight: 2,
          strokeColor: hex,
          fillOpacity: 0.2                    
        });

        // Set the distance property value, default to 50km.
        this.set('distance', perimeterDefault);
        this.set('perimeterMin', perimeterMin);
        this.set('perimeterMax', perimeterMax);
        
        this.set('circle', circle);

        // Bind the RadiusWidget bounds property to the circle bounds property.
        this.bindTo('bounds', circle);

        // Bind the circle center to the RadiusWidget center property
        circle.bindTo('center', this);

        // Bind the circle map to the RadiusWidget map
        circle.bindTo('map', this);

        // Bind the circle radius property to the RadiusWidget radius property
        circle.bindTo('radius', this);

        // Add the sizer marker
        this.addSizer_();
      }
      RadiusWidget.prototype = new google.maps.MVCObject();


      /**
       * Update the radius when the distance has changed.
       */
      RadiusWidget.prototype.distance_changed = function() {
        if (this.get('distance') < 5) {
          this.set('distance', 5);    
        }
        if (this.get('distance') > 100) {
          this.set('distance', 100);    
        }
        this.set('radius', this.get('distance') * 1000);
      };


      /**
       * Add the sizer marker to the map.
       *
       * @private
       */
      RadiusWidget.prototype.addSizer_ = function() {
        var sizer = new google.maps.Marker({
          draggable: true,
          title: 'Sleep mij om het zoekgebied te vergroten of te verkleinen!',
             icon: sliderIcon()
        });
        this.set('slider', sizer);
        sizer.bindTo('map', this);
        sizer.bindTo('position', this, 'sizer_position');

        var me = this;
        google.maps.event.addListener(sizer, 'drag', function() {
          // Set the circle distance (radius)
          me.setDistance();
        });
        google.maps.event.addListener(sizer, 'dragend', function() {
          // Set the circle distance (radius)
          me.sliderDropped();
        });
        
      };


      /**
       * Update the center of the circle and position the sizer back on the line.
       *
       * Position is bound to the DistanceWidget so this is expected to change when
       * the position of the distance widget is changed.
       */
      RadiusWidget.prototype.center_changed = function() {
        var bounds = this.get('bounds');

        // Bounds might not always be set so check that it exists first.
        if (bounds) {
          var lng = bounds.getNorthEast().lng();

          // Put the sizer at center, right on the circle.
          var position = new google.maps.LatLng(this.get('center').lat(), lng);
          this.set('sizer_position', position);
        }
      };


      /**
       * Calculates the distance between two latlng points in km.
       * @see http://www.movable-type.co.uk/scripts/latlong.html
       *
       * @param {google.maps.LatLng} p1 The first lat lng point.
       * @param {google.maps.LatLng} p2 The second lat lng point.
       * @return {number} The distance between the two points in km.
       * @private
       */
      RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) {
        if (!p1 || !p2) {
          return 0;
        }

        var R = 6371; // Radius of the Earth in km
        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;
        var result = d.toFixed(0);        
        return result;
      };


      /**
       * Set the distance of the circle based on the position of the sizer.
       */
      RadiusWidget.prototype.setDistance = function() {
        // As the sizer is being dragged, its position changes.  Because the
        // RadiusWidget's sizer_position is bound to the sizer's position, it will
        // change as well.
        var pos = this.get('sizer_position');
        var center = this.get('center');
        var distance = this.distanceBetweenPoints_(center, pos);

        // Set the distance property for any objects that are bound to it
        this.set('distance', distance);
      };
      /**
       * The slider is dropped.  We will check if the the marker is dropped within the range set by the user/developper
       */
      RadiusWidget.prototype.sliderDropped = function() {

        var pos = this.get('sizer_position');
        var center = this.get('center');
        var distance = this.distanceBetweenPoints_(center, pos);
        if (distance > this.perimeterMax || distance < this.perimeterMin) {
          this.slider.setPosition(
            new google.maps.LatLng(
              center.lat(),                                //
              this.circle.getBounds().getNorthEast().lng() // far east of circle
            )          
          );        
        }
       };

function RadiusWidget() {
        /**
       * nieuwe code
       */
        
        if (updateMarkerAddress('Onbekend')){
            hex = '#FF0000';
        }
        else{
            hex = '#007A98';
        }
        var circle = new google.maps.Circle({
          strokeWeight: 2,
          strokeColor: hex,
          fillOpacity: 0.2                    
        });

return geocodeResponse.address_components[i].long_name;

      function updateMarkerAddress(str) {
          $("#controls #perimeter_postal").val(str);
          
          if (str == 'Onbekend') {
              var hex = '#FF0000';
          }
          else {
              var hex = '#007A98';
          }
          if (typeof radiusWidget != 'undefined' && typeof radiusWidget.circle != 'undefined') {
            radiusWidget.circle.setOptions({
              strokeColor: hex
            });
          }
        }