https://github.com/its-prithvi-raj/angular-mapit
Googlemap using angular.
https://github.com/its-prithvi-raj/angular-mapit
agm angular angular-framework javascript mapit mouseevent scss typescript
Last synced: 6 months ago
JSON representation
Googlemap using angular.
- Host: GitHub
- URL: https://github.com/its-prithvi-raj/angular-mapit
- Owner: its-prithvi-raj
- Created: 2021-01-05T19:19:26.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-17T13:25:12.000Z (over 4 years ago)
- Last Synced: 2025-06-02T01:09:44.811Z (7 months ago)
- Topics: agm, angular, angular-framework, javascript, mapit, mouseevent, scss, typescript
- Language: TypeScript
- Homepage:
- Size: 328 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mapit 🌎
A simple Angular framework based Google Maps with place search feature. 🗺️🧭
# Description 🎀
A google map based on angular with draggable marker and place search bar to get address and laitude, longitude coordinates.
You've to use your own google API key and enable restrictions. In order to do, kindly, follow up [this link](https://developers.google.com/maps/documentation/javascript/get-api-key). 🛎️
Make sure to enable the Maps Javascript API (Show Map), Places API (Places search results) & Geocoding API (Convert Lat, Long to address). ⏰
# Tools used 🧰
* [Angular framework, CLI ver 11.0.4](https://angular.io/)
* [Bootstrap cdn](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css)
* [Angular Google Maps (AGM)](https://angular-maps.com/)
* [@types/googlemaps](https://www.npmjs.com/package/@types/googlemaps)
# To run 🏃
1. git clone https://github.com/Kshatriyaprithviraj/Angular-Mapit.git
2. navigate to folder and run npm install
3. open http://localhost:4200
# Disclaimer ⚡
Depending upon the AGM version, you may get an error for Mouseevent on map when in use of markerDragEnd() method.
For @agm/core version < 3.0, MouseEvent doesn't come anymore from @agm/core
i.e., Usage will depend on the version of AGM. 😀
For the version that I've implemented i.e., @agm/core@3.0.0.beta, you've to use MouseEvent as follow :
```typescript
mapClicked($event: google.maps.MouseEvent): void {
this.markers.push({
lat: $event.latLng.lat(),
lng: $event.latLng.lng(),
draggable: true
});
}
```
Cheers!! 🥂