Google Maps Javascript API Ionic - PullRequest
Новая
       39

Google Maps Javascript API Ionic

0 голосов
/ 13 февраля 2020

Я пытаюсь отобразить карты Google в своем приложении, и оно постоянно говорит: 

Google Maps JavaScript API error: RefererNotAllowedMapError

Я знаю, что это потому, что у меня нет хостинга веб-сайтов, но у меня его нет, потому что это Android приложение. У меня нет хозяев. Я также попробовал без ограничений и Google Maps SDK с хранилищем ключей отладки. Кто-нибудь может мне помочь?

Вот мой код: 

packages.json
"@ionic-native/google-maps": "^5.5.0",
"cordova-plugin-googlemaps": "^2.6.2",

config.xml
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="API_KEY" />

index.html
<script src="http://maps.google.com/maps/api/js?key=API_KEY"></script>

page.ts
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  MarkerOptions,
  Marker,
  Environment
} from "@ionic-native/google-maps/ngx";

declare var google;

@Component({
  selector: 'app-quem-somos',
  templateUrl: './quem-somos.page.html',
  styleUrls: ['./quem-somos.page.scss'],
})
export class QuemSomosPage {
  @ViewChild('map', {static: false}) mapElement: ElementRef;
  @ViewChild('map2', {static: false}) mapElement2: ElementRef;

  map;
  map2;
  toastController;
  latLng;
  latLng2;

  constructor(toastController: ToastController, public platform: Platform, public launchNavigator: LaunchNavigator) {
      this.toastController = toastController;
   }

   ionViewDidEnter() {
    this.platform.ready().then(() => {
      this.loadMap();
    });

   }

  loadMap(){
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'API_KEY',
      'API_KEY_FOR_BROWSER_DEBUG': 'API_KEY'
    });

    this.latLng = new google.maps.LatLng(-22.918978, -47.071869);

    let mapOptions = {
      center: this.latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    this.latLng2 = new google.maps.LatLng(-22.979192, -47.127404);

    let mapOptions2 = {
      center: this.latLng2,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map2 = new google.maps.Map(this.mapElement2.nativeElement, mapOptions2);

    this.addMarker();
    this.addMarker2();
  }

page.html
<div class="abrir-mapa">
        <div class="abrir-mapa" #map id="map"></div>
      </div>

page.scss
#map {
    width: 100%;
    height: 100%;
}

#map2 {
    width: 100%;
    height: 100%;
}

.abrir-mapa {
    height: 25rem;
    width: 100%;
}

1 Ответ

0 голосов
/ 13 февраля 2020

Я мог бы решить проблему! Я только что удалил android платформу и удалил node_modules, и это снова заработало! Но я думаю, этого не должно быть.

...