Google map native plugin already defined

hello all i’m using google map native plugin this
and this is my code to load a map
home.html file

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content >
  <div id="map" #map >

  </div>
</ion-content>

home.scss

ion-app .nav-decor{
    background-color: transparent !important;
  }
page-home {
    #map {
        height: 100%;
    }
}

home.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import {   GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker } from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  map: GoogleMap;
  @ViewChild('map') mapElement: ElementRef;
  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private platform: Platform) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
    //this.AdditionalTools.inittFirebase();
    this.platform.ready().then(() => {
      this.loadMap();
   })

  }
  loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };
    this.map = GoogleMaps.create(this.mapElement.nativeElement, mapOptions);
    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');
        // Now you can use all methods safely.
        this.map.addMarker({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: {
            lat: 43.0741904,
            lng: -89.3809802
          }
        })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                alert('clicked');
              });
          });

      });
  }

}

my problem when i run this code in real device i’ts give me gray page with google logo only

and in the google chrome inspector it’s give me this error

 Uncaught module cordova-plugin-googlemaps.CordovaGoogleMaps already defined

so what can i do to solve this error
thanks in advance

Uncaught module cordova-plugin-googlemaps.CordovaGoogleMaps already defined is a bug of the google maps plugin, but it does not affect to run the plugin itself.

The gray map is your api key problem.

Do you use ionic serve? It occured to me last week, that Google Maps API now requires an URL call from an HTTPS source only. If you use ionic serve, you’re doomed to http only for the time being, hence maybe a silent fail from Maps API.

Latest version 2.2.4 fixed the issue “cordova-plugin-googlemaps.CordovaGoogleMaps already defined”.

However, it seems that when you use the command “ionic cordova plugin add cordova-plugin-googlemaps”, it still refers to version 2.2.3.

Use the following command to add the current version, don’t forget to remove the existing plugin first if you haven’t done so already.

$ ionic cordova plugin add cordova-plugin-googlemaps@2.2.4 --variable API_KEY_FOR_ANDROID=“YOUR_ANDROID_API_KEY_IS_HERE” --variable API_KEY_FOR_IOS=“YOUR_IOS_API_KEY_IS_HERE”

2 Likes

@inameandy thanks for letting us know :slight_smile: