Untitled

<!DOCTYPE html>
<html>
<style>
body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}
</style>
<body>

<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
    myMap();
});

function myMap() {
    //add global geocoder
    window.geocoder = new google.maps.Geocoder();

  var mapCanvas = document.getElementById("map_div");
  var mapOptions = { zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(33.808678, -117.918921) };
  window.map = new google.maps.Map(mapCanvas,mapOptions);

  drawCircleAroundCity('ottawa');
}

function drawCircleAroundCity(cityName){
    if(!cityName) return;
  if(!window.geocoder) throw "Geocoder is not loaded";

  window.geocoder.geocode({ 'address': cityName }, function (results, status) {
    if (status == 'OK') {
      addCircle(results[0].geometry.location, true);
    } else {
      throw 'Unable to find address: ' + address;
    }
  });
}

function addCircle(position, recenter){
    if(typeof(position) != 'object') return;
  if(!window.map) throw "Map is not loaded";

  var myCity = new google.maps.Circle({
    center: position,
    radius: 50000,
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#0000FF",
    fillOpacity: 0.4
  });

  myCity.setMap(window.map);

  if(recenter)
    window.map.setCenter(position);
}
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>
</body>
</html>