Карта Google не отображается Javascript Иони c 4 - PullRequest
Новая
       14

Карта Google не отображается Javascript Иони c 4

0 голосов
/ 19 января 2020

Я пытался вставить карту Google на свой веб-сайт Ioni c 4, но не смог, потому что карта не отображается.

Вот мой код ниже 

  ionViewDidEnter(){
    console.log('creating map')
    // var latlng = new google.maps.LatLng(39.305, -76.617);
    this.map = new google.maps.Map(document.getElementById("map"), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });    
}

Вот как я вставляю его в файл HTML 

<div id="map" class="map"></div>

Любая подсказка или помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 20 января 2020

Джо sh У Морони есть отличное сообщение в блоге , в котором рассказывается, как создать компонент карты. В основном это выглядит примерно так:

Установка типов для карт Google 

 npm install @types/googlemaps --save-dev

Инициализация карты в вашем компоненте 

/// <reference types="@types/googlemaps" />
import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {

  constructor() {}

  async ngAfterViewInit() {
    const googleMaps = await getGoogleMaps("YOUR-API-KEY-HERE");
    this.initMap();
  }
  initMap() {
    const POSITION = {lat: -25.344, lng: 131.036};

    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: POSITION || { lat: 22, lng: 22 }
    });
  }
}

function getGoogleMaps(apiKey: string): Promise<any> {
  const win = window as any;
  const googleModule = win.google;
  if (googleModule && googleModule.maps) {
    return Promise.resolve(googleModule.maps);
  }

  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
    script.onload = () => {
      const googleModule2 = win.google;
      if (googleModule2 && googleModule2.maps) {
        resolve(googleModule2.maps);
      } else {
        reject("google maps not available");
      }
    };
  });
}

Первая строка /// <reference types="@types/googlemaps" /> из компонент должен решить проблему, связанную с Typescript (подробности здесь )

Наконец, убедитесь, что ваш CSS настроен для рендеринга карты. 

#map {
    width: 100%;
    height: 100%;
    display: contents;
}

Надеюсь, это поможет.

...