Getting Started

A map is initialized with options and dimensions. Refer to the google maps api for the list of available options.

<p-gmap [options]="options" [style]="{'width':'100%','height':'320px'}" ></p-gmap>
 

export class MyModel {
    options: any;
    overlays: any[];
    ngOnInit() {
        this.options = {
            center: {lat: 36.890257, lng: 30.707417},
            zoom: 12
        };
    }
}
 

<p-gmap [options]="options" [overlays]="overlays" [style]="{'width':'100%','height':'320px'}" ></p-gmap>
 

Events

GMap provides common callbacks to hook into events including map click, overlay click and overlay dragging.

<p-gmap [options]="options" [overlays]="overlays" [style]="{'width':'100%','height':'320px'}"
            (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)"></p-gmap>
 

export class MyModel {
    options: any;
    overlays: any[];
    ngOnInit() {
        this.options = {
            center: {lat: 36.890257, lng: 30.707417},
            zoom: 12
        };
        this.overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
            new google.maps.Polygon({paths: [
                {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
            }),
            new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
            new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
        ];
    }
    handleMapClick(event) {
        //event: MouseEvent of Google Maps api
    }
    handleOverlayClick(event) {
        //event.originalEvent: MouseEvent of Google Maps api
        //event.overlay: Clicked overlay
        //event.map: Map instance
    }
}
 

In case you need to access the map instance directly, use the getMap() method.

<p-gmap #gmap [options]="options"></p-gmap>
<button type="button" pButton label="Zoom In" icon="fa-search-plus" (click)="zoomIn(gmap.getMap())"></button>
 

<p-gmap #gmap [options]="options" [overlays]="overlays" [style]="mapStyle"
    (onMapReady)="setMap($event)"></p-gmap>
 

Then from your component you would write

export class MyModel {
    options: any;
    overlays: any[];
    map: google.maps.Map;
    setMap(event) {
        this.map = event.map;
    }
    ngOnInit() {
        this.overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
        ]
        // ... extend bounds
        this.overlays.forEach(marker => {
            bounds.extend(marker.getPosition());
        });
        setTimeout(()=> { // map will need some time to load
            this.map.fitBounds(bounds); // Map object used directly
        }, 1000);
    }
}
 

Properties

Dependencies

Google Maps API.

Source

<p-toast [style]="{marginTop: '80px'}"></p-toast>
<p-gmap #gmap [style]="{'width':'100%','height':'320px', 'margin-bottom': '1em'}" [options]="options" [overlays]="overlays"
       (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)" (onOverlayDragEnd)="handleDragEnd($event)"></p-gmap>
<button type="button" pButton label="Clear" icon="pi pi-times" (click)="clear()" style="margin-right:.25em"></button>
<button type="button" pButton label="Zoom In" icon="pi pi-plus" (click)="zoomIn(gmap.getMap())" style="margin-right:.25em"></button>
<button type="button" pButton label="Zoom Out" icon="pi pi-minus" (click)="zoomOut(gmap.getMap())"></button>
<p-dialog showEffect="fade" [(visible)]="dialogVisible" header="New Location">
    <div class="ui-g ui-fluid" *ngIf="selectedPosition">
        <div class="ui-g-2"><label for="title">Label</label></div>
        <div class="ui-g-10"><input type="text" pInputText id="title" [(ngModel)]="markerTitle"></div>
        <div class="ui-g-2"><label for="lat">Lat</label></div>
        <div class="ui-g-10"><input id="lat" type="text" readonly pInputText [ngModel]="selectedPosition.lat()"></div>
        <div class="ui-g-2"><label for="lng">Lng</label></div>
        <div class="ui-g-10"><input id="lng" type="text" readonly pInputText [ngModel]="selectedPosition.lng()"></div>
        <div class="ui-g-2"><label for="drg">Drag</label></div>
        <div class="ui-g-10"><p-checkbox [(ngModel)]="draggable" binary="true" [style]="{'margin-top':'.25em'}"></p-checkbox></div>
    </div>
    <p-footer>
        <div class="ui-dialog-buttonpane ui-helper-clearfix">
            <button type="button" pButton label="Add Marker" icon="fa-plus" (click)="addMarker()"></button>
        </div>
</p-dialog>