Ionic 5 Full Starter App
  • Enappd Apps
  • Ionic 5 Full App
    • What is Ionic 5 Full App?
    • Template Features
    • Initial Setup
      • Environment Configuration
      • Credentials
    • Running the app
    • Deploying app as PWA
    • Building App on device
    • How to use this template?
      • Copy a module to another app
      • Shared Component & Modules
      • Map Service
    • Beginner Pack Features
      • Firebase
      • Layouts
      • Sidemenus
      • Login and Signups
      • Chat screens
      • Chat Lists
      • Video Playlists
      • Grids and Lists Layouts
    • Startup Pack Features
      • Wordpress
        • Wordpress JSON API Basics
        • Wordpress in Ionic 5 Full App
      • Translation - Multi-language
      • Using Custom Fonts
      • Infinite scroll
      • Content Loaders
      • Pull to refresh
      • List re-ordering
      • Date Pickers
    • Pro Pack Features
      • Phaser Game Framework
      • AdMob Integration
        • AdMob Introduction
        • Setting up Google Admob
        • Integration
      • Social Sharing
      • QR and Barcode Scanning
      • Google Places
      • Google Autocomplete
      • Social Logins
        • Google Login
        • Facebook Login
        • Twitter Login
      • Woo-commerce Integration
    • Removing a Page / Component
    • Removing a plugin
    • FAQs
    • Changelog
    • Troubleshoot
Powered by GitBook
On this page

Was this helpful?

  1. Ionic 5 Full App
  2. How to use this template?

Map Service

Handling Map service

PreviousShared Component & ModulesNextBeginner Pack Features

Last updated 3 years ago

Was this helpful?

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 .

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

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>

official documentation
this discussion