Карты Google и Ionic (JavaScript API v3)

Интересный путь интеграции карт Google в приложение Ionic

Нет сомнений, что Google Map JavaScript API v3 отлично подходит для быстрого прототипирования, но он также сопряжен с некоторыми компромиссами. Давайте посмотрим, как интегрировать JavaScript API.

Интеграция — это всего 3 шага:

1. Посетите сайт разработчика Google Maps, нажмите кнопку Получить ключ и зарегистрируйте приложение, оно сгенерирует ключ приложения.
2. Добавьте ссылку SDK в теги сценария index.html
   <script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
3. Добавьте declare var google: any; к вашему компоненту перед определением класса

и начать использовать его вот небольшой фрагмент кода.

мой-component.html

<div id="map-container"></div>

мой-component.scss

#map-container {
  height: 300px; /* mandatory */
}

мой-component.ts

import ...
declare var google: any; // a dirty way
@Component({...})
export class MyComponent {
  @ViewChild('map') mapRef: ElementRef;
  constructor() {
    this.showMap();
  }
  
  showMap() {
    // Location - lat long
    const location = new google.maps.LatLng(31.588466, 74.314981);

    // Map options
    const options = {
      center: location,
      zoom: 17,
      streetViewControl: false,
      disableDefaultUI: true
    };

    this.map = new google.maps.Map(this.mapRef.nativeElement, options);

    this.addMarker(location, this.map);
  }
  private addMarker(position, map) {
    return new google.maps.Marker({
      position,
      map
    });
  }
}

Плюсы:

• Очень быстрая интеграция карт
• Доступны все API, просто нужно следовать документации

Минусы

• Нет оффлайн поддержки
• Никаких подсказок кода во время разработки
• Иногда странная ошибка google не определяется