title: Google Maps API, add hover state to pin
body: <p>i'm creating a Marker layer on my Google Map, and then adding pins. These get added to this layer. I want to add a hover effect which is basically a circle behind the pin. </p>
  
  <p>I was going to just use CSS, however I can't add a <code>before</code> or <code>after</code> to the image, so I need to get the parent element and add it to this. However the Google Maps API doesn't give you access to the Pin element. </p>
  
  <pre><code>var markerLayer = new google.maps.OverlayView();
  markerLayer.draw = function () {
        this.getPanes().markerLayer.id='markerLayer';
  };
  markerLayer.setMap(_.map);
  
  // Create pin and store it
  var marker = new google.maps.Marker({
     position: new google.maps.LatLng(location.lat, location.lng),
     icon: marker,
     title: location.name,
     optimized: false
  });
  _.markers.push(marker);
  </code></pre>
  
  <p>Below is a screenshot of what the <code>marker</code> object contains, and as you can see there is no reference to the HTMLElement.</p>
  
  <p><a href="https://i.stack.imgur.com/kvOh2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kvOh2.png" alt="enter image description here"></a></p>
  
  <p>My only though was to search the <code>#markerLayer</code> div for images and storing them, assuming that these will appear in the same order as they are added to the <code>_.markers</code> property. </p>
  
  <p>Or would a better way be to create a Circle using the API and putting it in the same position as the pin?</p>