@angular/google-maps

Displaying a Google Map

This feature allows you to display a basic Google Map in your Angular application. The map's height and width can be customized using the height and width attributes.

{
  "template": "<google-map height='400px' width='750px'></google-map>",
  "component": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-map',\n  templateUrl: './map.component.html',\n  styleUrls: ['./map.component.css']\n})\nexport class MapComponent {}"
}

Adding Markers to the Map

This feature allows you to add markers to the Google Map. The position of the marker is specified using latitude and longitude coordinates.

{
  "template": "<google-map height='400px' width='750px'>\n  <map-marker [position]="{lat: 37.421995, lng: -122.084092}"></map-marker>\n</google-map>",
  "component": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-map',\n  templateUrl: './map.component.html',\n  styleUrls: ['./map.component.css']\n})\nexport class MapComponent {}"
}

Handling Map Events

This feature allows you to handle events on the Google Map, such as clicks. The example shows how to log the event details when the map is clicked.

{
  "template": "<google-map height='400px' width='750px' (mapClick)='onMapClick($event)'></google-map>",
  "component": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-map',\n  templateUrl: './map.component.html',\n  styleUrls: ['./map.component.css']\n})\nexport class MapComponent {\n  onMapClick(event: google.maps.MapMouseEvent) {\n    console.log('Map clicked', event);\n  }\n}"
}