search

cormacmchale / ProfPractice

An ionic App
0 stars 0 forks source link

Google Maps #3

Closed cormacmchale closed 5 years ago

cormacmchale commented 5 years ago

Issues that we had while trying to implement the google maps plugin.

cormacmchale commented 5 years ago

Just need to get API key.. install of a plugin should be fine after that

cormacmchale commented 5 years ago

observableproblem

Getting a problem when trying to use plugin, something to do with Observables

cormacmchale commented 5 years ago

Observable problem fixed by an import.. but having problems with ionic framework

cormacmchale commented 5 years ago

issue Saw tutorial online and this was used in that so hopefully this will help. This is added to the index.html file in the app

cormacmchale commented 5 years ago

Going to re-learn Ionic but will re-visit the problem later...

cormacmchale commented 5 years ago

Plugin added. Closing the issue. The main problems that occurred were connected with some changes made in the 4th version of ionic. Presentation at src: "https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.g282d0a7bfd_0_127" was of great help. It gives a detailed step by step explanation how to install the plugin both in the 3rd and 4th version of ionic.

Here are the main changes that were made in the 4th version, which caused problems :

  1. Command to install google-maps plugin (@beta): npm install @ionic-native/core@beta npm install @ionic-native/google-maps@beta instead of: npm install --save @ionic-native/google-maps
  2. Imports (/ngx should be added at the end): import {GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Marker, Environment} from "@ionic-native/google-maps/ngx"; instead of import {GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Marker, Environment} from "@ionic-native/google-maps;
  3. Set up environment: In home.page.ts in loadMap() add the following lines of code: Environment.setEnv({ 'API_KEY_FOR_BROWSER_RELEASE': 'AIzaSyDQUaBvR0ZXMXsn-sPP6qhPw-qGFYmsTMs', 'API_KEY_FOR_BROWSER_DEBUG': '' });
cormacmchale commented 5 years ago

Next step is to add markers and polylines to the map