title: How to create a highlight an image when double clicked?
body: <p>I am trying to display a highlighted circle when the user double clicks on a certain part of an image. For example, if the image is a map of a city, and they double click on coord: (X, Y), I want the highlighted circle's center to be at (X, Y) and the radius would vary on the item that they clicked on.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;
     &lt;/script&gt;         
  &lt;script type="text/javascript"&gt; 
   function showMap(){        
          var mapOptions = {
                       zoom: 19,
                       center: new google.maps.LatLng(x, y),//let z, y be some coord
                       mapTypeId: google.maps.MapTypeId.ROADMAP,
                       disableDoubleClickZoom: true,
                       disableDefaultUI: true,
                       zoomControl: false,
                       draggable: false, 
                       scrollwheel: false
                  }
          map = new google.maps.Map(document.getElementById("myMap"), 
                          mapOptions);
  
          google.maps.event.addListener(map, 'dblclick', doubleClicked);
      }
  
      function doubleClicked(e){//highlight the area with a circle                
                  //alert("lat: " + e.latLng.lat() + "\nlong: " + e.latLng.lng());
      }        
   &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="myMap" &gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#myMap {
      margin-left: auto;
      margin-right: auto;
      width: 1200px;
      height: 800px
  }
  </code></pre>
  
  <p>Solution with help from @Aamir Sarwar:</p>
  
  <pre><code>var circle = new google.maps.Circle({
                  strokeColor: '#FFFFFF',
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: '#FF0000',
                  fillOpacity: 0.35,
                  map: map,
                  center: {lat: X, lng: Y}
                  radius: 10
              });
  </code></pre>