Question

我似乎无法使用Google Maps JavaScript API在Ionic应用程序上显示地图。

到目前为止，我已经尝试过google.maps.event.trigger(map, 'resize')，因为我更改了地图div的宽度...从解决方案here中看到了这一点。仅供参考，该地图以前可以正常运行，但是在我尝试平移时出现了一些故障。

在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')
  }
}

map.component.ts

中的HTML

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

CSS用于在global.css

中设置地图元素的样式

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

所以您可以在这里比较API密钥，这是我的感觉，这可能是问题所在，找到解决方案后，我将重新生成它，AIzaSyB6RgF7vmUE0mjk_glikiuuSmpGpaNiA24

当我在Google Chrome浏览器上查看该应用并尝试放大和缩小地图时，出现此错误ERROR TypeError: Cannot read property 'zoom' of null

Answer 1

我个人需要在我的网站上使用Google地图的位置，所以我要做的是我从Google地图中嵌入了该位置，然后单击“共享”，然后单击“嵌入地图”，然后您复制html代码并将其放入您的html代码中。

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

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

1 个答案: