title: How to draw pin marker like the one on google map using SVG JS?
body: <p>I am using <code>HTML5 Interactive map</code> and i have only one shape for my map pin which is circle,is it possible to make something like <code>google map pin marker</code> by set additional attributes to my circle code:</p>
  
  <pre><code>var points_len = wmConfig['points'].length;
  if( points_len &gt; 0){
      var xmlns = "http://www.w3.org/2000/svg";
      var tsvg_obj = document.getElementById("map_points");
      var svg_circle,svg_rect,svg_image;
      for(var i=0;i&lt;points_len;i++){
          if (wmConfig['points'][i]['shape']=="circle"){
              svg_circle = document.createElementNS(xmlns, "circle");
              svg_circle.setAttributeNS(null, "cx", wmConfig['points'][i]['pos_X']);
              svg_circle.setAttributeNS(null, "cy", wmConfig['points'][i]['pos_Y']);
              svg_circle.setAttributeNS(null, "r", wmConfig['points'][i]['diameter']/2);
              svg_circle.setAttributeNS(null, "fill", wmConfig['points'][i]['upcolor']);
              svg_circle.setAttributeNS(null, "stroke",wmConfig['points'][i]['outline']);
              svg_circle.setAttributeNS(null, "stroke-width",wmConfig['points'][i]['thickness']);
              svg_circle.setAttributeNS(null, "id",'map_points_'+i);
              svg_circle.setAttributeNS(null, "data-smallipop-referenced-content",'#map_data_'+i);
              svg_circle.setAttributeNS(null, "title",wmConfig['points'][i]['hover']);
              tsvg_obj.appendChild(svg_circle);
              dynamicAddEvent(i);
          }
  </code></pre>