Native Google Maps Black Screen

Ionic Framework ionic-v3
5

Below is my code, you can use it:

Add this in ion-content: <div #map id="map"></div>

And this will be in ts file:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Platform } from 'ionic-angular';
import 'rxjs/add/operator/map';

declare var google;

/*
 Generated class for the Contact page.

 See http://ionicframework.com/docs/v2/components/#navigation for more info on
 Ionic pages and navigation.
 */
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(platform: Platform) {

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

  }

  loadMap(){

    let latLng = new google.maps.LatLng('67.875323', '91.123890');

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

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

    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: latLng
    });

    let content = "<h4>Heading</h4>";

    this.addInfoWindow(marker, content);

  }

  addInfoWindow(marker, content){

    let infoWindow = new google.maps.InfoWindow({
      content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    });

  }

}
1 Like