title: How can I call a function in Google Map in initialize from within jQuery?
body: <p>I believe I am having some scope issues. I have the following problem. </p>
  
  <p>I have an input that users put a radius into. Within jQuery I have listener that checks for keyup() on that input box. I then have a google map that draws circles based on the radius given. It works find calling a jquery function that passes it the radius when the marker on the map is dragged BUT I want to also call the function that is in google maps that draws the circles on keyup() in jquery.
  <em>In brief:</em> 
  <em>I want to call a function outside of jquery within the google maps initialize on my keyup event.</em> </p>
  
  <p>Code: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var radius;
  var rad;
  var unit_conversion;
  var unit;
  $(function() {
   $('#search-radius').keyup(function() {
    $.getRadius();
  
  //TRYING TO CALL FUNCTION THAT IS WITHIN gmap.js -&gt; initialize -&gt; setOverlay();
      setOverlay();
  
    alert("change");
  });
  
  $.getRadius = function get_radius() {
    var rad = $("#search-radius").val();
    var unit = $("#search-unit").val();
    var unit_conversion = {"km": 1000, "yrd": 1.09361 ,"mi": 1609.344};
  
    switch (unit) {
    case "m":
      window.radius = rad;
    break;
    case "km":
      window.radius = rad * unit_conversion[unit];
    break;
    case "yrd":
      window.radius = rad * unit_conversion[unit];
    break;
    case "mi":
      window.radius = rad * unit_conversion[unit];
    break;
    default: 
      alert("Unit Type Error");
    }     
    alert (window.radius);
    return window.radius;
   }
  
  
  });  
  &lt;/script&gt;
  </code></pre>
  
  <p>gmaps.js</p>
  
  <pre><code>// Google Maps
  
  var marker_lat_lang;
  var search_areas = [];
  var current_radius;
  
  function initialize() {
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      panControl: false,
      zoomControl: false,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("gmap"),
          myOptions);
  
    //Set up marker
    var marker = new google.maps.Marker({
        position: myOptions.center,
        draggable: true, 
        map: map,
        title:""+ marker_lat_lang +""
    });
  
  
    // When user finishes dragging get lat long of marker
    google.maps.event.addListener(marker, 'dragend', function(){ 
      setOverlay();
    });
  
    // Deletes all markers in the array by removing references to them
    function deleteOverlays() {
      if (search_areas) {
        for (i in search_areas) {
          search_areas[i].setMap(null);
        }
      search_areas.length = 0;
      }
    }  
  //FUNCTION TRYING TO BE CALLED. Contains gmaps api stuff so can't seem to call in global space. 
      function setOverlay() {
        var marker_lat = marker.position.lat();
        var marker_lng = marker.position.lng();
  
        $.getradius();
        var current_radius = window.radius;
        var radius = parseFloat(window.radius);
        deleteOverlays();
        marker_lat_lang = new google.maps.LatLng(marker_lat, marker_lng);
        // Draw circle for radius
        var search_area_options = {
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35,
          map: map,
          center: marker_lat_lang,
          radius: radius
        };
        search = new google.maps.Circle(search_area_options);
        search_areas.push(search);  
      }  
  
    // Bounce UI control
    google.maps.event.addListener(marker, 'click', toggleBounce);
  
    function checkRadius() {
      alert ("CR" + current_radius + "WR" + window.radius);
      if ( current_radius != window.radius) {
  
        setOverlay();
      }
    }
  
    function deleteOverlay (overlay) {
      overlay.setMap(null);
    }
  
    function toggleBounce() {
      if (marker.getAnimation() != null) {
        marker.setAnimation(null);
      } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
    }
  
  }
  </code></pre>