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.

You can read the introduction of Angular Google Maps component in official documentation.

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.

If you get an error saying You have included the Google Maps JavaScript API multiple times on this page. check this discussion

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>