Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@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.2 "metal-marble" (2024-03-06)
| Commit | Type | Description | | -- | -- | -- | | 4af777a189 | fix | drag-drop: resolve helper directives with DI for proper hostDirectives support (#28633) | | 94eafc134f | fix | overlay: fix overlay margin in isBoundedByLeftViewportEdge ('left-ward') mode (#28233) |
| Commit | Type | Description | | -- | -- | -- | | 65aaaf3abf | fix | autocomplete: prevent hidden overlay from blocking clicks (#28677) | | d08ddaab81 | fix | autocomplete: requireSelection sometimes not clearing value when editing after selection (#28628) | | 5b3210bfda | fix | checkbox: derive checkmark color from palette | | fb20320b82 | fix | chips: derive surface color from palette | | fe01e298a0 | fix | core: mark fields on HasErrorState as nullable (#28689) | | afbb34e415 | fix | datepicker: always move caret to the end of the start input on backspace (#28669) | | ec6f8e2e62 | fix | datepicker: datepicker doesn't announce newly selected range in firefox (#28529) | | ba6e809761 | fix | expansion: prevent focus from entering the panel while it's animating (#28646) | | 07f5ed9dc6 | fix | schematics: add typography and density to custom theme (#28645) | | 6d8160c166 | fix | schematics: don't interrupt ng add if adding the animations module fails (#28675) | | 9655ecb872 | fix | slide-toggle: m3 selected track outline (#28625) (#28634) | | 7d352fbf88 | perf | form-field: resolve scrolling performance issues (#27251) |
| Commit | Type | Description | | -- | -- | -- | | f18ef99785 | feat | theming: provide hook for formatting tokeā¦ (#28660) |
| Commit | Type | Description | | -- | -- | -- | | 14c055fe07 | fix | derive all token values from theme (#28664) |
<!-- CHANGELOG SPLIT MARKER --><a name="17.2.1"></a>
FAQs
Angular Google Maps
The npm package @angular/google-maps receives a total of 100,790 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 0 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
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.