Google Maps JavaScript API显示灰色空白框而不是地图

Question

I can't seem to get a map to show on an Ionic Application, with Google Maps JavaScript API.

So far I have tried google.maps.event.trigger(map, 'resize') , since I have changed the width of the map div... Saw that from a solution here . FYI the map used to work fine, but had a few glitches when I tried to pan around.

In map.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { google } from 'google-maps';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
  // Map setup
  @ViewChild('mapElement', {static: true}) mapElement: ElementRef<HTMLElement>;
  map: google.maps.Map;

  constructor() {
  }
  ngOnInit() {
    console.log('Map')
    this.map = new google.maps.Map(this.mapElement.nativeElement, {
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });
    google.maps.event.trigger(this.map, 'resize')
    console.log('Map Seconded')
  }
}

The HTML in map.component.ts

<div id="map-element" #mapElement></div>

The CSS is used to style the map-element in global.css

#map-element {
    display: block;
    height: 400px;
}

Just so you can compare API Keys here is mine I have a feeling that is where the problem might be, after I have found a solution I'll have it regenerated, AIzaSyB6RgF7vmUE0mjk_glikiuuSmpGpaNiA24

When I view the app on Google Chrome and try to zoom in and out of the map I get this error ERROR TypeError: Cannot read property 'zoom' of null

Answer 1

Personally I needed a location from google maps on my website, so what I did is that I embedded the the location from google maps, and you do so by clicking on "Share" and then "Embed a map" and then you copy the html code and put it in your html code.

<a><iframe src="html code" class="map" width="250" height="200" frameborder="0" 
style="border:0" allowfullscreen></iframe></a>