This page can't load google maps correctly error

Hello…!

I am getting error like “This page can’t load google maps correctly” in my once page in my project. 1st of all i show my console details,
I have activated my project on console and i have correctly copy past my code from the console

I past script code to my index.html file like this

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBa6gYiA16ORJpAm3Q-eXt6######"></script> <!-- hide my last few codes :D -->
</body>
</html>

And this is my control ts file.

import {Component, ViewChild} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';

/**
 * Generated class for the ContactPage page.
 */

@IonicPage()
@Component({
    selector: 'page-contact',
    templateUrl: 'contact.html',
})
export class ContactPage {
    @ViewChild("map") mapElement;
    map : any;

    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }
    ngOnInit() {
        console.log('ionViewDidLoad ContactPage');
        this.initMap();
    }
    initMap(){
        let cords = new google.maps.LatLng(6.123166174,81.120666184);
        let mapOpt : google.maps.MapOptions = {
            center : cords,
            zoom : 12,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        this.map = new google.maps.Map(this.mapElement.nativeElement,mapOpt);
       let marker : google.maps.Marker = new google.maps.Marker({
            map: this.map, position: cords})
    }

}

Those are the my target lang and lat coordinates 6.123166174 81.120666184

And this is my view html codes

<!--
  Generated template for the ContactPage page.
-->
<ion-header>
    <ion-navbar>
        <ion-title>Contact Us</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <div #map id="map" class="google-map"></div>
</ion-content>

Terminal show me those error

[app-scripts] ‘marker’ is declared but its value is never read.
[app-scripts] L31: this.map = new google.maps.Map(this.mapElement.nativeElement,mapOpt);
[app-scripts] L32: let marker : google.maps.Marker = new google.maps.Marker({
[app-scripts] L33: map: this.map, position: cords})

Browser console show me this error

You have exceeded your request quota for this API. See https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors
_.Yb @ js?key=AIzaSyBa6gYiA16ORJpAm3Q-eXt6iq#######:40

According to console error, That mean i have to pay use this service? isn’t free service :open_mouth:
Please somebody help me solve this issue :neutral_face:

Google Maps API is not free service, but it has a free quota.

In order to get $200/monthly free quota, you need to enable your payment.

2 Likes