map.panBy()

April 20, 2018 ยท View on GitHub

Changes the center of the map by the given distance in pixels.

map.panBy(x, y)

Parameters

nametypedescription
xnumberdistance x in pixels
ynumberdistance y in pixels

Demo code

<div class="map" id="map_canvas">
    <span class="smallPanel"><button>Click here</button></span>
</div>
map: GoogleMap;

loadMap() {
  this.map = GoogleMaps.create('map_canvas', {
    camera: {
      target: {lat: 35, lng: 138},
      zoom: 10
    }
  });

  // In order to use the fromPointToLatLng() method, wait the MAP_READY event
  this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      console.log('Map is ready!');

      // Draw grids
      let canvas:any = document.getElementById("grid_canvas");
      let h = this.map.getDiv().offsetHeight,
        w = this.map.getDiv().offsetWidth;
      canvas.width = w;
      canvas.height = h;

      let ctx = canvas.getContext('2d');
      for (let y = 50; y < h; y+= 50) {
        ctx.beginPath();
        ctx.setLineDash([5,5,5]);
        ctx.moveTo(0, y);
        ctx.lineTo(w, y);
        ctx.stroke();
      }
      for (let x = 50; x < w; x+= 50) {
        ctx.beginPath();
        ctx.setLineDash([5,5,5]);
        ctx.moveTo(x, 0);
        ctx.lineTo(x, h);
        ctx.stroke();
      }

      // Add a marker
      this.map.fromPointToLatLng([50, 100]).then((latLng: LatLng) => {
        this.map.addMarker({
          position: latLng
        });
      });

    });
}

onButtonClick(event) {
  if(this.map) {
    this.map.panBy(50, 50);
  }
}