GMapGMap component provides integration with Google Maps API. This sample demontrates various uses cases like binding, overlays and events. Click the map to add a new item.

GMap - 图1

Documentation

Import

  1. import {GMapModule} from 'primeng/gmap';
  2.  

Getting Started

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

  1. <p-gmap [options]="options" [style]="{'width':'100%','height':'320px'}" ></p-gmap>
  2.  
  1. export class MyModel {
  2. options: any;
  3. overlays: any[];
  4. ngOnInit() {
  5. this.options = {
  6. center: {lat: 36.890257, lng: 30.707417},
  7. zoom: 12
  8. };
  9. }
  10. }
  11.  

Overlays

GMap can display any type of overlay such as markers, polygons and circles. Overlay instances are bound using the overlays property array. Overlays are aware of one-way binding so whenever the array changes, gmap updates itself.

  1. <p-gmap [options]="options" [overlays]="overlays" [style]="{'width':'100%','height':'320px'}" ></p-gmap>
  2.  
  1. export class MyModel {
  2. options: any;
  3. overlays: any[];
  4. ngOnInit() {
  5. this.options = {
  6. center: {lat: 36.890257, lng: 30.707417},
  7. zoom: 12
  8. };
  9. this.overlays = [
  10. new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
  11. new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
  12. new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
  13. new google.maps.Polygon({paths: [
  14. {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
  15. ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
  16. }),
  17. new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
  18. 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})
  19. ];
  20. }
  21. }
  22.  

Events

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

  1. <p-gmap [options]="options" [overlays]="overlays" [style]="{'width':'100%','height':'320px'}"
  2. (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)"></p-gmap>
  3.  
  1. export class MyModel {
  2. options: any;
  3. overlays: any[];
  4. ngOnInit() {
  5. this.options = {
  6. center: {lat: 36.890257, lng: 30.707417},
  7. zoom: 12
  8. };
  9. this.overlays = [
  10. new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
  11. new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
  12. new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
  13. new google.maps.Polygon({paths: [
  14. {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
  15. ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
  16. }),
  17. new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
  18. 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})
  19. ];
  20. }
  21. handleMapClick(event) {
  22. //event: MouseEvent of Google Maps api
  23. }
  24. handleOverlayClick(event) {
  25. //event.originalEvent: MouseEvent of Google Maps api
  26. //event.overlay: Clicked overlay
  27. //event.map: Map instance
  28. }
  29. }
  30.  

Google Maps API

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

  1. <p-gmap #gmap [options]="options"></p-gmap>
  2. <button type="button" pButton label="Zoom In" icon="fa-search-plus" (click)="zoomIn(gmap.getMap())"></button>
  3.  
  1. export class MyModel {
  2. options: any;
  3. overlays: any[];
  4. ngOnInit() {
  5. this.options = {
  6. center: {lat: 36.890257, lng: 30.707417},
  7. zoom: 12
  8. };
  9. }
  10. zoomIn(map) {
  11. map.setZoom(map.getZoom()+1);
  12. }
  13. }
  14.  

Another option is to to get the map object directly after init via (onMapReady) event. In the example below, google.maps.Map is used for adjusting map bounds to markers.

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

Then from your component you would write

  1. export class MyModel {
  2. options: any;
  3. overlays: any[];
  4. map: google.maps.Map;
  5. setMap(event) {
  6. this.map = event.map;
  7. }
  8. ngOnInit() {
  9. let bounds = new google.maps.LatLngBounds();
  10. this.overlays = [
  11. new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
  12. new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
  13. new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
  14. ]
  15. // ... extend bounds
  16. this.overlays.forEach(marker => {
  17. bounds.extend(marker.getPosition());
  18. });
  19. setTimeout(()=> { // map will need some time to load
  20. this.map.fitBounds(bounds); // Map object used directly
  21. }, 1000);
  22. }
  23. }
  24.  

Properties

NameTypeDefaultDescription
optionsanynullGoogle Maps API configuration object.
overlaysarraynullAn array of overlays to display.
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.

Events

NameParametersDescription
onMapClickevent: Google Maps MouseEventCallback to invoke when map is clicked except markers.
onMapDragEndoriginalEvent: Google Maps dragendCallback to invoke when map drag (i.e. pan) has ended.
onMapReadyevent.map: Google Maps InstanceCallback to invoke when the map is ready to be used.
onOverlayClickoriginalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance Callback to invoke when an overlay is clicked.
onOverlayDblClickoriginalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance Callback to invoke when an overlay is double clicked.
onOverlayDragoriginalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance Callback to invoke when an overlay is being dragged.
onOverlayDragEndoriginalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance Callback to invoke when an overlay drag ends.
onOverlayDragStartoriginalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance Callback to invoke when an overlay drag starts.
onZoomChangedoriginalEvent: Google Maps zoom_changedCallback to invoke when zoom level has changed.

Dependencies

Google Maps API.

Source

View on GitHub

  1. <p-toast [style]="{marginTop: '80px'}"></p-toast>
  2. <p-gmap #gmap [style]="{'width':'100%','height':'320px', 'margin-bottom': '1em'}" [options]="options" [overlays]="overlays"
  3. (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)" (onOverlayDragEnd)="handleDragEnd($event)"></p-gmap>
  4. <button type="button" pButton label="Clear" icon="pi pi-times" (click)="clear()" style="margin-right:.25em"></button>
  5. <button type="button" pButton label="Zoom In" icon="pi pi-plus" (click)="zoomIn(gmap.getMap())" style="margin-right:.25em"></button>
  6. <button type="button" pButton label="Zoom Out" icon="pi pi-minus" (click)="zoomOut(gmap.getMap())"></button>
  7. <p-dialog showEffect="fade" [(visible)]="dialogVisible" header="New Location">
  8. <div class="ui-g ui-fluid" *ngIf="selectedPosition">
  9. <div class="ui-g-2"><label for="title">Label</label></div>
  10. <div class="ui-g-10"><input type="text" pInputText id="title" [(ngModel)]="markerTitle"></div>
  11. <div class="ui-g-2"><label for="lat">Lat</label></div>
  12. <div class="ui-g-10"><input id="lat" type="text" readonly pInputText [ngModel]="selectedPosition.lat()"></div>
  13. <div class="ui-g-2"><label for="lng">Lng</label></div>
  14. <div class="ui-g-10"><input id="lng" type="text" readonly pInputText [ngModel]="selectedPosition.lng()"></div>
  15. <div class="ui-g-2"><label for="drg">Drag</label></div>
  16. <div class="ui-g-10"><p-checkbox [(ngModel)]="draggable" binary="true" [style]="{'margin-top':'.25em'}"></p-checkbox></div>
  17. </div>
  18. <p-footer>
  19. <div class="ui-dialog-buttonpane ui-helper-clearfix">
  20. <button type="button" pButton label="Add Marker" icon="fa-plus" (click)="addMarker()"></button>
  21. </div>
  22. </p-footer>
  23. </p-dialog>
  24.  
  1. export class GMapDemo implements OnInit {
  2. options: any;
  3. overlays: any[];
  4. dialogVisible: boolean;
  5. markerTitle: string;
  6. selectedPosition: any;
  7. infoWindow: any;
  8. draggable: boolean;
  9. constructor(private messageService: MessageService) {}
  10. ngOnInit() {
  11. this.options = {
  12. center: {lat: 36.890257, lng: 30.707417},
  13. zoom: 12
  14. };
  15. this.initOverlays();
  16. this.infoWindow = new google.maps.InfoWindow();
  17. }
  18. handleMapClick(event) {
  19. this.dialogVisible = true;
  20. this.selectedPosition = event.latLng;
  21. }
  22. handleOverlayClick(event) {
  23. let isMarker = event.overlay.getTitle != undefined;
  24. if(isMarker) {
  25. let title = event.overlay.getTitle();
  26. this.infoWindow.setContent('' + title + '');
  27. this.infoWindow.open(event.map, event.overlay);
  28. event.map.setCenter(event.overlay.getPosition());
  29. this.messageService.add({severity:'info', summary:'Marker Selected', detail: title});
  30. }
  31. else {
  32. this.messageService.add({severity:'info', summary:'Shape Selected', detail: ''});
  33. }
  34. }
  35. addMarker() {
  36. this.overlays.push(new google.maps.Marker({position:{lat: this.selectedPosition.lat(), lng: this.selectedPosition.lng()}, title:this.markerTitle, draggable: this.draggable}));
  37. this.markerTitle = null;
  38. this.dialogVisible = false;
  39. }
  40. handleDragEnd(event) {
  41. this.messageService.add({severity:'info', summary:'Marker Dragged', detail: event.overlay.getTitle()});
  42. }
  43. initOverlays() {
  44. if(!this.overlays||!this.overlays.length) {
  45. this.overlays = [
  46. new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
  47. new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
  48. new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
  49. new google.maps.Polygon({paths: [
  50. {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
  51. ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
  52. }),
  53. new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
  54. 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})
  55. ];
  56. }
  57. }
  58. zoomIn(map) {
  59. map.setZoom(map.getZoom()+1);
  60. }
  61. zoomOut(map) {
  62. map.setZoom(map.getZoom()-1);
  63. }
  64. clear() {
  65. this.overlays = [];
  66. }
  67. }
  68.