title: How to create a custom-shaped marker with images (Google Maps map API v3)
body: <p>I’m able to replace Google Map Markers with images :</p>
  
  <p>I dynamically load users avatars on the map using this :</p>
  
  <pre><code>var icon = {
          // i get images url dynamically with html5 data attributes
          url: $marker.attr('data-icon'), // url
  
          scaledSize: new google.maps.Size(50, 50), // scaled size
          origin: new google.maps.Point(0, 0), // origin
          anchor: new google.maps.Point(0, 0) // anchor
  
  
      };
  </code></pre>
  
  <p>Here is the result :</p>
  
  <p><a href="https://i.stack.imgur.com/X3Dtp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X3Dtp.png" alt="enter image description here"></a></p>
  
  <p>For now, it’s working but the graphic result is not what i want. I would like to have something like (i didn't design this example but you can see the idea) :</p>
  
  <p><a href="https://i.stack.imgur.com/8074l.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8074l.jpg" alt="enter image description here"></a></p>
  
  <p>I was thinking of 3 possible solutions :</p>
  
  <p>1- Create a polygon behind image in order to create a border and a kind of arrow.</p>
  
  <p>2) Load 2 images : avatar image and behind graphic image of a custom pin (not sure it’s possible to load 2 images for a marker)</p>
  
  <p>3) Add the possibility to have custom CSS for the markers like in this answer on this question  :</p>
  
  <p><a href="https://stackoverflow.com/questions/23965161/js-maps-v3-custom-marker-with-user-profile-picture">JS Maps v3: custom marker with user profile picture</a>
  demo : <a href="http://jsfiddle.net/mfirdaus/DVKEj/" rel="nofollow noreferrer">http://jsfiddle.net/mfirdaus/DVKEj/</a></p>
  
  <p>What would be the best approach to achieve this ?</p>