@angular/google-maps
Advanced tools
@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.
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}"
}
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.
The sources for this package are in the main Angular Material repo. Please file issues and pull requests against that repo.
License: MIT
17.2.0 "polymer-prism" (2024-02-14)
| Commit | Type | Description | | -- | -- | -- | | 55eeee3516 | fix | listbox: unable to tab in if active option is removed (#28583) | | 2f7aaaa220 | fix | table: error if outlets are assigned too early (#28551) |
| Commit | Type | Description | | -- | -- | -- | | 99a4e2a10f | fix | button-toggle: Add remaining typography tokens needed for M3 (#28578) | | e05795dde0 | fix | button: calculate icon button padding based on tokens | | a496855f30 | fix | button: generate separate tokens for mini fab | | cbeeb3ae17 | fix | checkbox: use token for disabled label color | | 0a1c8eedb4 | fix | chips: Tokenize chip outline and disabled opacity (#28488) | | 58764afec2 | fix | chips: Tokenize the hover & focus overlays (#28497) | | 32f86e48e1 | fix | chips: Tokenize the selected state (#28498) | | 1dcc195853 | fix | core: ensure that option inherits container background | | 873c8e97dc | fix | datepicker: fix M3 styles (#28556) | | 8ac58ff328 | fix | datepicker: fix touchui shadow and border-radius (#28577) | | 92ab097987 | fix | datepicker: use direction-agnostic text-align | | 0edc47673f | fix | form-field: container height in lower densities (#28546) | | b1f281cab5 | fix | list: ensure leading icon scales with token | | 306c2424f7 | fix | list: indexOf usage incorreect for active focus reset (#28531) | | 75955eb9b4 | fix | list: match leading icon size in M3 to spec | | b8327cd92c | fix | list: tokenize active-indicator (#28586) | | ba05521005 | fix | list: tokenize space around leading icon | | 0d88889452 | fix | list: use direction-agnostic text-align | | 46fe83f21f | fix | list: use transparent background for M3 (#28504) | | 044c9ba648 | fix | menu: prevent icon from collapsing when text is long (#28541) | | 47c55925c0 | fix | menu: Update token values and styles for M3 (#28470) | | a656164255 | fix | progress-bar: incorrect alignment if direction is set on element | | f6d3f1bc21 | fix | schematics: import async animations and remove deprecated function usages (#28424) | | fbf2ef3fcb | fix | select: fix m3 arrow alignment (#28545) | | fca43aa49b | fix | select: styles for m3 (#28492) | | d799c044a7 | fix | slide-toggle: fix m3 slide-toggle handle (#28503) | | 130afedf1c | fix | slide-toggle: m3 slide-toggle track (#28539) | | 63c6b841b4 | fix | slide-toggle: m3 track outline and handle opacity (#28565) | | 2455a42d3c | fix | stepper: Update token values for M3 and add color variant support (#28430) | | f9621a7c8c | fix | tabs: prevent page scroll on space press (#28532) |
| Commit | Type | Description | | -- | -- | -- | | d16e8ac5de | feat | theming: add M3 tokens for pseudo checkbox (#28407) | | 4742a175ab | fix | theming: Add more tests for M3 theme tokens (#28561) | | 1f1dac5e57 | fix | theming: Add support for color variants in badge, button-toggle, button, pseudo-checkbox, and chips (#28457) | | 08c97ab648 | fix | theming: Add support for color variants in option, checkbox, and fab (#28412) | | 715877a13d | fix | theming: Add support for color variants in progress-spiner, progress-bar, list, form-field, and datepicker (#28451) | | 29a1e5d8a1 | fix | theming: Add support for color variants in slide-toggle, select, and radio (#28445) | | e45e210055 | fix | theming: Add support for color variants in tabs and slider (#28417) | | 9ab104b804 | fix | theming: align dialog with M3 | | 957bc487bf | fix | theming: align fab with M3 spec | | ba3680ed48 | fix | theming: align M3 icon buttons with spec | | 601a745fc8 | fix | theming: cap icon button size | | 339905c5af | fix | theming: disabled radio button incorrect label color (#28415) | | b6e0b20e1f | fix | theming: Fix chip trailing icon opacity in M3 (#28530) | | fdd16e6675 | fix | theming: fix filled text field | | 06c81e38c7 | fix | theming: fix paginator in M3 | | 59b93b44ab | fix | theming: Fix token causing test failure on CI (#28569) | | 1e48cd431f | fix | theming: fix up M3 checkbox | | 056e2221ec | fix | theming: implement M3 badge (#28460) | | 93f3421538 | fix | theming: incorrect track color for alternate progress bar palettes (#28484) | | 935eda0872 | fix | theming: incorrect validation for density scale | | 8fab89229d | fix | theming: Make color API back-cmpat styles available (#28526) | | f1deb30a17 | fix | theming: Make M3 work with typography-hierarchy (#28540) | | 5f1a7ea1ee | fix | theming: resolve M3 issues in mat-option (#28482) | | dabb96765a | fix | theming: set up core theme and app tokens (#28431) | | d26a51e3a5 | fix | theming: set up internal form field in M3 (#28414) | | 42f2cc9ad8 | fix | theming: set up padding tokens | | 0da585f730 | fix | theming: Update color palettes (#28472) |
<!-- CHANGELOG SPLIT MARKER --><a name="16.2.14"></a>
FAQs
Angular Google Maps
The npm package @angular/google-maps receives a total of 68,802 weekly downloads. As such, @angular/google-maps popularity was classified as popular.
We found that @angular/google-maps demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.