CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Vampire
Vampire

Reputation: 38734

anchor in Marker with SVG path screws up the image

I have a problem with the following code.
As you can see it draws a "T" on water which is fine and exactly what I want in this example.
The problem now is that I want to set the anchor.
If you comment-in the anchor line in the marker, you will see that the T is totally screwed up. instead of just shifted a little bit so that the foot of the T is the anchor.
Is this a bug, then I hope it gets fixed.
Is there a workaround how I do get this to work correctly besides recalculating all the path coordinates if that works at all?

<!DOCTYPE html>
<html>
  <head>
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(40, -150),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        new google.maps.Marker({
          icon: {
              //anchor: new google.maps.Point(8.1328125, 17),
              path: 'm 7.1855469,17 0,-12.6269531 -4.7167969,0 0,-1.6894531 11.347656,0 0,1.6894531 -4.7363279,0 0,12.6269531 z'
          },
          position: new google.maps.LatLng(40, -150),
          map: map
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>

Upvotes: 0

Views: 4850

Answers (1)

Jack B Nimble
Jack B Nimble

Reputation: 5087

The issue is that you are using the command m which moves the pen to a specified point x,y relative to the current pen location. When you change your anchor you are not offsetting all the points uniformly, but are distorting them with an anchor that affects them all relative to each other. (I'm not sure I'm explaining this). M & L use x y points, m and l use relative x y points.

Here I have replaced your implied MoveTo (m) statements with LineTo (L). (I also moved your start point so it actually points to something, so you can see how changing the anchor uniformly moves the path. Also there is a basic marker for reference). 

<!DOCTYPE html>
<html>

<head>
  <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css"
    rel="stylesheet">
  <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script>
    function initialize() {
      var mapOptions = {
        zoom: 21,
        center: new google.maps.LatLng(40, -83),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      };

      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

      new google.maps.Marker({
        icon: {
          anchor: new google.maps.Point(6, 15),
          path: 'm 0,0 L12,0 L12,2 L7,2 L7,14 L5,14 L5,2 L0,2 z',
          scale: 5,
          strokeColor: 'red'
        },
        position: new google.maps.LatLng(40, -83),
        map: map
      });


      // I am a reference marker
      new google.maps.Marker({
        position: new google.maps.LatLng(40, -83),
        map: map
      });
    }
  </script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>

Upvotes: 2

Related Questions