> For the complete documentation index, see [llms.txt](https://enappd-apps.gitbook.io/apps/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd-apps.gitbook.io/apps/ionic-4-full-app/how-to-use-this-template/map-service.md).

# Map Service

Handling Map service

In a recent change, we removed `@agm/core` and other modules like `agm-direction` from the Full App. These libraries were not being regularly updated, and were causing issues in app building. The Ionic Full App now used the community supported `@angular/google-maps` library for all map related features. 

{% hint style="info" %}
You can read the introduction of **Angular Google Maps** component in [official documentation](https://github.com/angular/components/blob/master/src/google-maps/README.md).
{% endhint %}

#### Global Service

In most of the modules and pages, the Google Map is loaded just as a static map, we made a common service `map.service.ts` at the root level. If you are using any module where this service is being used, make sure you copy this service in your app as well. 

For modules like **Google Places** etc. the API is loaded in place, in the constructor of the page itself. In such case, you don't need the `map.service.ts` file. 

{% hint style="warning" %}
If you get an error saying `You have included the Google Maps JavaScript API multiple times on this page.` check [this discussion](https://github.com/angular/components/issues/17828)
{% endhint %}

#### Lazy Loaded

The maps can be lazy loaded in Angular Google Maps. 

If you don't need lazy loading, you can remove the lazy loading code from the individual pages' constructors, or don't use `map.service.ts` wherever it is being used. Instead you can import the map at once in `index.html` as 

```
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
```