kshatriyaprithviraj / angular-mapit

Googlemap using angular.

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. 🛎️

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
• Bootstrap cdn
• Angular Google Maps (AGM)
• @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/[email protected], you've to use MouseEvent as follow :

mapClicked($event: google.maps.MouseEvent): void {
    this.markers.push({
      lat: $event.latLng.lat(),
      lng: $event.latLng.lng(),
      draggable: true
    });
  }

Cheers!! 🥂