Restrict to a specific country in agm-map

Question

Below is my code which I'm able to plot the points on map. But I want my map to restrict to one country. How can this be achieved in agm-map?

Example, I want it to be restricted to only western Australia.

maps.html

<agm-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  (mapClick)="mapClicked($event)">

  <agm-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"
      [markerDraggable]="m.draggable"
      (dragEnd)="markerDragEnd(m, $event)">

    <agm-info-window>
      <strong>InfoWindow content</strong>
    </agm-info-window>

  </agm-marker>

  <agm-circle [latitude]="lat + 0.3" [longitude]="lng" 
      [radius]="5000"
      [fillColor]="'red'"
      [circleDraggable]="true"
      [editable]="true">
  </agm-circle>

</agm-map>

maps.ts

import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // google maps zoom level
  zoom: number = 8;

  // initial center position for the map
  lat: number = 51.673858;
  lng: number = 7.815982;

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }

  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng,
      draggable: true
    });
  }

  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }

  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982,
          label: 'A',
          draggable: true
      },
      {
          lat: 51.373858,
          lng: 7.215982,
          label: 'B',
          draggable: false
      },
      {
          lat: 51.723858,
          lng: 7.895982,
          label: 'C',
          draggable: true
      }
  ]
}

// just an interface for type safety.
interface marker {
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
}

Answer 1

In order to show only one country or only one region on AGM map you have to apply view port restriction. Official documentation provides the following page to explain the stuff:

https://developers.google.com/maps/documentation/javascript/examples/control-bounds-restriction

The AGM map supports restriction property, so you just need to add restriction in your component class and add restriction attribute in your html template.

E.g. to limit a map to Switzerland I do the following (note countryRestriction field)

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // google maps zoom level
  zoom: number = 5;

  // initial center position for the map
  lat: number = 46.7985624;
  lng: number = 8.2319736;

  //view port restrictions
  countryRestriction = {
    latLngBounds: {
      east: 10.49234,
      north: 47.808455,
      south: 45.81792,
      west: 5.95608
    },
    strictBounds: true
  };

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }

  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng,
      draggable: true
    });
  }

  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }

  markers: marker[] = [
  {
    lat: 47.4052961,
    lng: 8.6011908,
    label: 'A',
    draggable: true
  },
  {
    lat: 46.9728419,
    lng: 7.4304635,
    label: 'B',
    draggable: false
  },
  {
    lat: 46.2585634,
    lng: 6.2226607,
    label: 'C',
    draggable: true
  }
  ]
}

and add my restriction in html

<agm-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [restriction]="countryRestriction"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  (mapClick)="mapClicked($event)">

  <agm-marker 
    *ngFor="let m of markers; let i = index"
    (markerClick)="clickedMarker(m.label, i)"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="m.label"
    [markerDraggable]="m.draggable"
    (dragEnd)="markerDragEnd(m, $event)">
    
    <agm-info-window>
      <strong>InfoWindow content</strong>
    </agm-info-window>
  
  </agm-marker>
</agm-map>

You can see a complete example of the AGM map limited to Switzerland on stackblitz:

https://stackblitz.com/edit/angular-google-maps-demo-bul5fg