Google Map API для Ионных приложений

Question

СИТУАЦИЯ:

мне нужно включать карту Google внутри моего приложения ионического.

УСТАНОВКА КАРТЫ:

Для того, чтобы проверить это, я сделал следующие шаги:

1. Регистрируясь в Google Console Developer
2. Включить Google Maps JavaScript API
3. Получить ключ API в качестве ключа браузера

4. Добавьте скрипт в index.html:

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

5. Создать DIV карты и связанные с CSS:

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

6. Сделать базовую карту с центром в геолокации пользователя:

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

выпуска:

Он работает нормально, но это было для целей тестирования в браузере. Когда я протестировал его в приложении или в эмуляторе (Genymotion), карта даже не открывается. Конечно, причина может быть простой: потому что у меня есть ключ браузера.

Но я пробовал другие ключи и не открылся в любом случае.

Поскольку код является правильным, вопросы:

1. Какого типа Google Map я должен позволить, чтобы иметь карту Google в моем приложении Ionic, что прекрасно работает как для Android и Ios?

Правильный выбор API Google Maps JavaScript API?

2. Какой тип ключа я должен получить между ключом сервера - ключом браузера - ключом андроида - ключом ios? Используется ли ключ браузера для собственных приложений?

спасибо !!

Answer 1

Я нашел решение, используя angular-google-maps.

Для того, чтобы настроить его, выполните основные шаги в документации. Он работает в браузере как угловое приложение, а также в телефоне как приложение для ионных гибридов.

Answer 2

Попробуйте следующее Script-

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

Answer 3

У меня есть тот же пример кода с вами, и вы сталкиваетесь с той же проблемой в Genymotion. Я решаю проблему, настраивая некоторые настройки разработчика Genymotion.

1. Dev Настройка -> Эмуляция расположения проверено Allow mock locations

2. Убедитесь, что GPS включен. Set GPS on