Google Карти са много полезни за много приложения като,

  • Приложение за такси
  • Приложение за местоположение на членове на семейството
  • Бизнес приложения (за показване на бизнес местоположение)
  • SOS приложения
  • Приложения за електронна търговия

Има някои налични плъгини за извършване на интегрирането на Google Maps към проект на Ionic Angular, но те имат по-малко функции. С помощта на API на Javascript на Google Maps ще можете да изпълнявате всякакви функции. Следвайте тези инструкции стъпка по стъпка, за да добавите Google Map към вашия Ionic ап.

1) Инсталиране

Импортирайте скрипта за карта в страницата index.html. Тук ще се използва Javascript API на Google Map. Първо трябва да получите ключ за API на Google Карти и да замените YOUR_API_KEY.

index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

2) Настройка на интерфейса на картата

Създайте HTML компонент във вашата страница с карта, за да покажете картата

MapPage.html

<div class="map-div" #gmap></div>

Декларирайте Google Карти на MapPage.ts.Viewchild,AfterViewInit и ElementRef също трябва да бъдат импортирани

MapPage.ts

  import { Component, OnInit, ViewChild, ElementRef,AfterViewInit } from '@angular/core';
  declare const google: any;

Използвайте Viewchild и Elementref, за да изберете html елемента Map, който създадохме

MapPage.ts

  export class MapPage {
      @ViewChild('gmap') gmap!: ElementRef;
      myMap:any; 
   }

Трябва да заредим Goole Map след зареждане на всички основни ъглови компоненти.

MapPage.ts

  ngAfterViewInit() {
      this.loadMap()
     }
   
     public loadMap() {
       let mapOptions = {
         center: new google.maps.LatLng(37.7833, -122.4167), // Initial camera center of the map
         zoom: 12, //Camera zoom value
         mapTypeId: google.maps.MapTypeId.ROADMAP, //Select the Google Map Type 
         disableDefaultUI: true //Disabled the default layout which contains zoom in and out buttons
       }
   
       this.myMap = new google.maps.Map(this.gmap.nativeElement, mapOptions);//'gmap' is the html element 
   }

3) Добавяне на маркер

MapPage.ts

 //Adding a marker
   const marker = new google.maps.Marker({
      position: { lat: 35.7833, lng: -120.4167 }, //Latitude and longitude of the marker
      map: this.myMap 
    });

4) Пълен код

MapPage.ts

  
      import { Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
      declare const google: any;


      @Component({
        selector: 'map-page',
        templateUrl: 'mapPage.page.html',
        styleUrls: ['mapPage.page.scss']
      })
      export class MapPage implements AfterViewInit{

        @ViewChild('gmap') gmap!: ElementRef;

        myMap: any;

        constructor() {
        }

        ngAfterViewInit() {
          this.loadMap()
        }

        public loadMap() {
          let mapOptions = {
            center: new google.maps.LatLng(37.7833, -122.4167), // Initial camera center of the map
            zoom: 12, //Camera zoom value
            mapTypeId: google.maps.MapTypeId.ROADMAP, //Select the Google Map Type 
            disableDefaultUI: true //Disabled the default layout which contains zoom in and out buttons
          }

          this.myMap = new google.maps.Map(this.gmap.nativeElement, mapOptions);//'gmap' is the html element 

          //Adding a marker
          const marker = new google.maps.Marker({
            position: { lat: 35.7833, lng: -120.4167 }, //Latitude and longitude of the marker
            map: this.myMap
          });
        }

      }

да! Добавихме Google Map с маркер. Надяваме се, че това ръководство ви е помогнало и не сте загубили ценното ви време.

Времето е най-ценното нещо за програмиста.