@angular/google-maps

What is @angular/google-maps?

@angular/google-maps is an Angular package that provides a set of Angular components and services for integrating Google Maps into Angular applications. It allows developers to easily add maps, markers, and other map-related functionalities to their Angular projects.

What are @angular/google-maps's main functionalities?

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}"
}

Other packages similar to @angular/google-maps

ngx-google-maps

ngx-google-maps is an Angular package that provides components and services for integrating Google Maps into Angular applications. It offers similar functionalities to @angular/google-maps, such as displaying maps and adding markers, but with a different API and additional customization options.

README

Angular Material

The sources for this package are in the main Angular Material repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

18.2.0 "technetium-tapas" (2024-08-14)

Deprecations

material

• Tree controller deprecated. Use one of levelAccessor or childrenAccessor instead. To be removed in a future version.

  • BaseTreeControl, TreeControl, FlatTreeControl, and NestedTreeControl deprecated
  • CdkTree#treeControl deprecated. Provide one of CdkTree#levelAccessor or CdkTree#childrenAccessor instead.
  • MatTreeFlattener deprecated. Use MatTree#childrenAccessor and MatTreeNode#isExpandable instead.
  • MatTreeFlatDataSource deprecated. Use one of levelAccessor or childrenAccessor instead of TreeControl.

  Note when upgrading: isExpandable works differently on Trees using treeControl than trees using childrenAccessor or levelAccessor. Nodes on trees that have a treeControl are expandable by default. Nodes on trees using childrenAccessor or levelAccessor are not expandable by default. Provide isExpandable to override default behavior.

• Setting tabindex of tree nodes deprecated. By default, Tree ignores tabindex passed to tree nodes.

  • MatTreeNode#tabIndex deprecated. MatTreeNode ignores Input tabIndex and manages its own focus behavior.
  • MatTreeNode#defaultTabIndex deprecated. MatTreeNode ignores defaultTabIndex and manages its own focus behavior.
  • MatNestedTreeNode#tabIndex deprecated. MatTreeNode ignores Input defaultTabIndex and manages its own focus behavior.
  • LegacyTreeKeyManager and LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER deprecated. Inject a TreeKeyManagerFactory to customize keyboard behavior.

  Note when upgrading: an opt-out is available for keyboard functionality changes. Provide LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER to opt-out of Tree managing its own focus. When provided, Tree does not manage it’s own focus and respects tabindex passed to TreeNode. When provided, have the same focus behavior as before this commit is applied.

  Add Legacy Keyboard Interface demo, which shows usage of LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER. Add Custom Key Manager, which shows usage of injecting a TreeKeyManagerStrategy

• disabled renamed to isDisabled.

  • CdkTreeNode#disabled deprecated and alias to CdkTreeNode#isDisabled

material

| Commit | Type | Description | | -- | -- | -- | | ddc307e28 | feat | button-toggle: allow disabled buttons to be interactive (#29550) | | 841760101 | feat | checkbox: add the ability to interact with disabled checkboxes (#29474) | | 0af3b6175 | feat | radio: add the ability to interact with disabled radio buttons (#29490) | | 4292e1b3a | feat | slide-toggle: add the ability to interact with disabled toggle (#29502) | | a018fb0ee | feat | tooltip: replicate tooltipClass to default MatTooltipDefaultOptions (#29467) | | aaf0d5156 | fix | checkbox: account for disabledInteractive in harness | | d22a24d66 | fix | list: checkmark not visible in high contrast mode (#29546) | | a259b016b | fix | radio: account for disabledInteractive in harness | | fd47a0e60 | fix | radio: avoid error if destroyed quickly (#29507) | | 08d2e3e69 | fix | slide-toggle: account for disabledInteractive in harness | | fd416a30e | fix | tooltip: remove aria-describedby when disabled (#29520) | | ff36c80f9 | fix | tree: add levelAccessor, childrenAccessor, TreeKeyManager; a11y and docs improvements (#29062) | | 1f992d06c | fix | tree: aria-expanded attribute should not appear in the leaf node (#29273) |

cdk

| Commit | Type | Description | | -- | -- | -- | | b2c051d2c | feat | drag-drop: add input to specify dragged item scale (#29392) |

multiple

| Commit | Type | Description | | -- | -- | -- | | db5b8dc29 | feat | fallback to system level variables (#29480) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="18.1.5"></a>