THE SITUATION:

I need to include a Google map inside my Ionic app.

SETTING UP THE MAP:

In order to test it I have done the following steps:

1. Registering in Google Console Developer
2. Enable Google Maps JavaScript API
3. Get API key as Browser key

4. Add the script to index.html:

   <script src=";sensor=true"></script>
   

5. Create a map div and related css:

   <div id="map" data-tap-disabled="true"></div>
   
   #map {
       width: 100%;
       height: 100%;
   }
   

6. Make a basic map centered in the geolocation of the user:

   .controller('MapCtrl', function($scope, $state, $cordovaGeolocation) {
       var options = {timeout: 10000, enableHighAccuracy: true};
   
       $cordovaGeolocation.getCurrentPosition(options).then(function(position){
   
       var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
   
       var mapOptions = {
         center: latLng,
         zoom: 15,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
   
       $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
   
     }, function(error){
       console.log("Could not get location");
     });
   });
   

THE ISSUE:

It is working fine, but this was for test purpose in the browser. When i have tested it in the app or in the emulator (Genymotion) the map is not even opening. Of course the reason it may be simple: because i have a browser key.

But i have tried other keys and is not opening anyway.

Since the code is correct, the questions are:

1. Which type of Google Map i have to enable to have a Google Map in my Ionic app that works fine for both Android and Ios?

Is Google Maps JavaScript API the correct choice?

2. Which kind of key i have to get between server key - browser key - android key - ios key ? Does the browser key works for native apps?

Thank you!!

THE SITUATION:

I need to include a Google map inside my Ionic app.

SETTING UP THE MAP:

In order to test it I have done the following steps:

1. Registering in Google Console Developer
2. Enable Google Maps JavaScript API
3. Get API key as Browser key

4. Add the script to index.html:

   <script src="http://maps.google./maps/api/js?key=MY_API_KEY&sensor=true"></script>
   

5. Create a map div and related css:

   <div id="map" data-tap-disabled="true"></div>
   
   #map {
       width: 100%;
       height: 100%;
   }
   

6. Make a basic map centered in the geolocation of the user:

   .controller('MapCtrl', function($scope, $state, $cordovaGeolocation) {
       var options = {timeout: 10000, enableHighAccuracy: true};
   
       $cordovaGeolocation.getCurrentPosition(options).then(function(position){
   
       var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
   
       var mapOptions = {
         center: latLng,
         zoom: 15,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
   
       $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
   
     }, function(error){
       console.log("Could not get location");
     });
   });
   

THE ISSUE:

It is working fine, but this was for test purpose in the browser. When i have tested it in the app or in the emulator (Genymotion) the map is not even opening. Of course the reason it may be simple: because i have a browser key.

But i have tried other keys and is not opening anyway.

Since the code is correct, the questions are:

1. Which type of Google Map i have to enable to have a Google Map in my Ionic app that works fine for both Android and Ios?

Is Google Maps JavaScript API the correct choice?

2. Which kind of key i have to get between server key - browser key - android key - ios key ? Does the browser key works for native apps?

Thank you!!

• javascript
• android
• ios
• google-maps
• ionic-framework

3 Answers 3

I have found a solution using angular-google-maps.

Following the basic steps in the documentation is enough to set it up. It works in a browser as an angular app and also in a phone as a Ionic hybrid app.

I have the same sample code with you, and face the same problem in Genymotion. I solve the problem by adjusting some Genymotion developer setting .

1. Dev Setting -> Allow mock locations checked Allow mock locations

2. Make sure the GPS is on . Set GPS on

Try the following Script-

<script src="https://maps.googleapis./maps/api/js?v=3.exp&signed_in=true&libraries=places&language=en"></script>