title: drawing a google map shape marker object
body: <p>hi so im trying to make a clickable area with the google map marker shape attribute, but im kind of struggling drawing it and finding the right coords to place it.   i have a big imported svg and i would like it to be in the center of this svg.   is there a way or a program i can draw this on to see what the hell im doing?   cuz at the moment im just blindly trying to get the center of by randomly changing coords. or atleast make it a color so i can see where it is as im changing it.  according to the api it follows the w3 AREA coords specification , but to be honest i still dont really understand.  </p>
  
  <pre><code>var iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("builtMarker").innerHTML);
      var sizeX = 200;
      var sizeY = 200;
      var icon = {
          url: iconUrl,
          scaledSize: new google.maps.Size(sizeX, sizeY),
  
          anchor: new google.maps.Point(sizeX / 2, sizeY / 2)
      };
  var marker = new google.maps.Marker({        
          position: myLatLng,
          map: map,
          draggable: false,
          icon: icon,           
          shape: { 
              type: 'circle',
              coords: [184, 200, 60],
           } 
  
      });
  </code></pre>
  
  <p>so essentially i want to know how this guys figured out where and how to make the shape to be at the right place <a href="https://jsfiddle.net/geocodezip/y8yj86og/4/" rel="nofollow">fiddle</a></p>