Search code examples
javascripthtmlgoogle-mapsgoogle-polyline

My google maps path symbol is not centered

Hello guys so i'm working on a project that includes a path symbol of a plane moving on a polyline and happens that it´s not centered has shown in This picture

so I have this:

So here I declare the path symbol that is the plane symbol

var planeSymbol = {
    path: 'M 8.1326447,0.80527736 C 8.5471666,0.063577346 9.742752,0.030177346 10.052431,0.82497736 C 10.093464,3.0114774 10.134497,5.1980774 10.17553,7.3845774 C 12.760407,8.9653774 15.345284,10.546179 17.930161,12.127079 C 17.930161,12.881779 17.930161,13.636479 17.930161,14.391179 C 15.373077,13.579479 12.815993,12.767779 10.258908,11.956179 C 10.27281,13.280479 10.286713,14.604879 10.300615,15.929279 C 10.8565,16.555879 11.412385,17.182479 11.96827,17.809079 C 12.25527,18.269479 12.437605,19.641079 11.59784,19.085079 C 10.804104,18.802179 10.010367,18.519179 9.21663,18.236279 C 8.3133108,18.620779 7.4099916,19.005279 6.5066724,19.389779 C 6.3952441,18.705879 6.2272708,17.857479 6.8519879,17.359679 C 7.2927717,16.882879 7.7335555,16.406079 8.1743393,15.929279 C 8.1465467,14.604879 8.1187541,13.280479 8.0909615,11.956179 C 5.5894706,12.824879 3.0879797,13.693479 0.58648883,14.562179 C 0.54479393,13.821679 0.50309893,13.081079 0.46140403,12.340579 C 3.0184842,10.717079 5.5755645,9.0935778 8.1326447,7.4700774 C 8.1326447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z',
    scale: 1,
    strokeOpacity: 1,
    strokecolor: 'black',
    strokeWeight: 1

};

Next I set the polyline

var GRU = new google.maps.Polyline({
    path: [{lat: 38.771183, lng: -9.131135}, {lat: -23.6276104, lng: -46.6568016}], //Lis - GRU
    strokeOpacity: 0.3,
    icons: [ {
        icon: planeSymbol,
        offset: '0'
    } ],
                map: map
 });
 animatePlane(GRU);

And then i set the moving symbol speed etc.

function animatePlane(line) {
    var count = 0;
    window.setInterval(function () {
        count = (count + 0.01) % 200;
        var icons = line.get('icons');
        icons[0].offset = (count / 2) + '%';
        line.set('icons', icons);
    }, 20);
}

I have started learning html and javascript by myself and I research a lot so any help you can give to me I'll be very glad

Solution

  • Per the documentation, the anchor property of the symbol sets position of the symbol relative to the polyline.

    anchor | Type: Point

    The position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and up by the anchor's x and y coordinates respectively. By default, a symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the symbol's path.

    With your planeSymbol, an anchor of (9,9) is approximately in the center:

    var planeSymbol = {
  path: 'M 8.1326447,0.80527736 C 8.5471666,0.063577346 9.742752,0.030177346 10.052431,0.82497736 C 10.093464,3.0114774 10.134497,5.1980774 10.17553,7.3845774 C 12.760407,8.9653774 15.345284,10.546179 17.930161,12.127079 C 17.930161,12.881779 17.930161,13.636479 17.930161,14.391179 C 15.373077,13.579479 12.815993,12.767779 10.258908,11.956179 C 10.27281,13.280479 10.286713,14.604879 10.300615,15.929279 C 10.8565,16.555879 11.412385,17.182479 11.96827,17.809079 C 12.25527,18.269479 12.437605,19.641079 11.59784,19.085079 C 10.804104,18.802179 10.010367,18.519179 9.21663,18.236279 C 8.3133108,18.620779 7.4099916,19.005279 6.5066724,19.389779 C 6.3952441,18.705879 6.2272708,17.857479 6.8519879,17.359679 C 7.2927717,16.882879 7.7335555,16.406079 8.1743393,15.929279 C 8.1465467,14.604879 8.1187541,13.280479 8.0909615,11.956179 C 5.5894706,12.824879 3.0879797,13.693479 0.58648883,14.562179 C 0.54479393,13.821679 0.50309893,13.081079 0.46140403,12.340579 C 3.0184842,10.717079 5.5755645,9.0935778 8.1326447,7.4700774 C 8.1326447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z',
  scale: 1,
  strokeOpacity: 1,
  strokecolor: 'black',
  strokeWeight: 1,
  anchor: new google.maps.Point(9, 9)
};

    proof of concept fiddle

    symbol with anchor at center

    code snippet:

    var planeSymbol = {
  path: 'M 8.1326447,0.80527736 C 8.5471666,0.063577346 9.742752,0.030177346 10.052431,0.82497736 C 10.093464,3.0114774 10.134497,5.1980774 10.17553,7.3845774 C 12.760407,8.9653774 15.345284,10.546179 17.930161,12.127079 C 17.930161,12.881779 17.930161,13.636479 17.930161,14.391179 C 15.373077,13.579479 12.815993,12.767779 10.258908,11.956179 C 10.27281,13.280479 10.286713,14.604879 10.300615,15.929279 C 10.8565,16.555879 11.412385,17.182479 11.96827,17.809079 C 12.25527,18.269479 12.437605,19.641079 11.59784,19.085079 C 10.804104,18.802179 10.010367,18.519179 9.21663,18.236279 C 8.3133108,18.620779 7.4099916,19.005279 6.5066724,19.389779 C 6.3952441,18.705879 6.2272708,17.857479 6.8519879,17.359679 C 7.2927717,16.882879 7.7335555,16.406079 8.1743393,15.929279 C 8.1465467,14.604879 8.1187541,13.280479 8.0909615,11.956179 C 5.5894706,12.824879 3.0879797,13.693479 0.58648883,14.562179 C 0.54479393,13.821679 0.50309893,13.081079 0.46140403,12.340579 C 3.0184842,10.717079 5.5755645,9.0935778 8.1326447,7.4700774 C 8.1326447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z',
  scale: 1,
  strokeOpacity: 1,
  strokecolor: 'black',
  strokeWeight: 1,
  anchor: new google.maps.Point(9, 9)

};

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var GRU = new google.maps.Polyline({
    path: [{
      lat: 38.771183,
      lng: -9.131135
    }, {
      lat: -23.6276104,
      lng: -46.6568016
    }], //Lis - GRU
    strokeOpacity: 0.3,
    icons: [{
      icon: planeSymbol,
      offset: '0'
    }],
    map: map
  });
  var marker = new google.maps.Marker({
    position: {
      lat: 38.771183,
      lng: 0
    },
    map: map,
    icon: planeSymbol
  });
  var measle = new google.maps.Marker({
    position: {
      lat: 38.771183,
      lng: 0
    },
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  })
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < GRU.getPath().getLength(); i++) {
    bounds.extend(GRU.getPath().getAt(i));
  }
  map.fitBounds(bounds);
  animatePlane(GRU);
}

function animatePlane(line) {
  var count = 0;
  window.setInterval(function() {
    count = (count + 0.01) % 200;
    var icons = line.get('icons');
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
  }, 20);
}
google.maps.event.addDomListener(window, "load", initialize);
    html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
    <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>