Geek Answers Handbook

Google Map API for Ionic App

SITUATION:

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

CARD SETTING:

To verify this, I followed these steps:

  • Register Google Developer Console
  • Enable JavaScript API Google Maps
  • Get API key as browser key

  • Add a script to index.html:

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

  • Create a div map and related css:

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

  • Make a basemap in the user's geolocation center:

     .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"); }); });

RELEASE:

It works fine, but that was for testing purposes in the browser. When I tested it in the application or in the emulator (Genymotion), the card does not even open. Of course, the reason may be simple: because I have a browser key.

But I tried other keys and did not open anyway.

Since the code is correct, the questions are:

  • What type of Google Maps do I need to enable in order to have a Google map in my Ionic app that works great for Android and Ios?

Is the Google Maps JavaScript API selected correctly?

  1. What type of key should I get between the server key - browser key - android key - ios key? Does the browser key use for native applications?

Thanks!

+5
source share
3 answers

I found a solution using angular-google-maps .

Following the basic instructions in the documentation, just configure it. It works in the browser as an angular application, as well as in the phone as an application for ion hybrids.

+2
source

I have the same code example with you and are facing the same problem in Genymotion. I solve the problem by configuring some Genymotion developer settings.

+1
source

Try running Script -

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

More articles:


All Articles