Google Maps - don't work

Got it. Thanks very much for the advice. I will try this out later when I am home and report back.

Keep up the great work.

Cheers

Sadly I still have the problem - my full code is

import {Component, ViewChild} from "@angular/core";
import {NavController, Platform, Content} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, GoogleMapsMarkerOptions} from 'ionic-native';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  template: `<ion-header>
              <ion-navbar>
                <ion-title>
                  Blank Starter
                </ion-title>
              </ion-navbar>
            </ion-header>

            <ion-content class="home">
              <div style="height: 100%; width: 100%" id="map_canvas"></div>
            </ion-content>

            <ion-footer>
              <ion-toolbar>
                <button royal full>
                  Log In
                </button>
              </ion-toolbar>
            </ion-footer>`
})
export class HomePage {

  @ViewChild(Content) content: Content;

  private map: GoogleMap;

  constructor(private _navController: NavController, private platform: Platform) {

  }

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

  private onPlatformReady(): void {

    GoogleMap.isAvailable().then(() => {

      
      this.map = new GoogleMap('map_canvas');

      this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        alert("GoogleMap.onMapReady(): " + JSON.stringify(data));

        let myPosition = new GoogleMapsLatLng(38.9072, -77.0369);
    

        this.map.animateCamera({ target: myPosition, zoom: 10 });
      });
    });

  }
}

UPDATE 1: @aaronksaunders repo works if you use it as it is. If you take suggestion of @ihadeed to move this.map = new GoogleMap('map_canvas'); to be located inside the GoogleMap.isAvailable resolve method as follows:

GoogleMap.isAvailable().then(() => {

    this.map = new GoogleMap('map_canvas');

});

ā€¦ the solution breaks and we again get the black screen.

UPDATE 2: @aaronksaunders repo is not tied to the following in config.xml:

<engine name="ios" spec="~4.0.0" />
<engine name="android" spec="~5.1.0" /> 

These can safely be removed and the map will still work on the device.

UPDATE 3: The fundamental problems remains. It is not possible to upgrade to

"ionic-angular": "2.0.0-beta.10" 

and use cordova-plugin-googlemaps

If anyone is able to have a look at this repo: https://github.com/aaronksaunders/ionic2GMapNative2

and get it to work with ionic beta 10 I would be very grateful.

I have tried everything I can think of. It seems that the plugin is actually working because I can use it to get my location (no errors reported in Xcode dialog) and when I call map.showDialog() it works just fine, the camera even animates within the dialog. However, when trying to use the map without showDialog() its a black screen.

Please help!

Cheers.

NOTE: nevermind, this doesnā€™t work in all cases.


Hereā€™s a working code that I just tested on Android:

@Component({
  selector: 'GoogleMap',
  template: '<div [id]="id" [style.height]="height" [style.width]="width" style="display: block;"></div>'
})
export class GoogleMapComponent implements AfterViewInit {

  @Input() id: string = 'GoogleMap';
  @Input() height: string = '100%';
  @Input() width: string = '100%';
  @Output() init: EventEmitter<GoogleMap> = new EventEmitter<GoogleMap>();

  public map: GoogleMap;

  constructor(private platform: Platform){}

  ngAfterViewInit(): void {
    this.platform.ready()
      .then(()=>{
        GoogleMap.isAvailable()
          .then((isAvailable: boolean)=>{
            if(!isAvailable) return;
            this.map = new GoogleMap(this.id);
            this.init.emit(this.map);
          });
      });
  }

}

Usage:

<GoogleMap (init)="onMapInit($event)"></GoogleMap>
onMapInit(map: GoogleMap) {
    let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);
    let position: CameraPosition = {
      target: ionic,
      zoom: 18,
      tilt: 30
    };
    map.moveCamera(position);
    let markerOptions: GoogleMapsMarkerOptions = {
      position: ionic,
      title: 'Ionic'
    };
    map.addMarker(markerOptions)
      .then(
        (marker: GoogleMapsMarker) => {
          marker.showInfoWindow();
        }
      );
  }

Can also pass: width, height, and/or id.


Github Gist: https://gist.github.com/ihadeed/9e6cb11eb3ab3efc8ccf3a08ced90bf7

All functions seem to work, I tried putting the app in background and opening it without issues or black screens.

Hi @ihadeed, in your example are you using the side menu layout?

I have the native map working in a side menu project and when the side menu is open all interactions that should work on the menu just seem to interact with the map instead (such as swiping inside the menu).

Just wondered if youā€™re project was similar and if you had a resolution?

Yes iā€™m using a side menu.

So if you:

  1. Open app and go to page that displays the google native map

  2. Open your side menu

  3. Swipe around in your side menu (e.g. try swipe to close it)

Does this cause cause your side menu to close or does it drag the map around (which is hidden behind the side menu)?

Well I do nav.push() to display the map, no issues with the side menu when I do that.

But now for some reason the maps stopped working completely, I just end up getting a transparent screen with nothing in it. The map did instantiate but itā€™s buried down for some reason.

Ok thanks, mine is just added to the appā€™s default root page.

Iā€™m going to create a separate question for my problem seeing as its a different issue. Just need to figure out how to capture it in a video to help explain!

See this: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Ionic-Side-Menu-with-the-plugin

Itā€™s a solution for Ionic 1 , but Iā€™m sure thereā€™s a way to implement it for Ionic 2.

I did look into that.

I tried applying the visibility: visible; property to the side menu using WEINRE inspector but this didnt seem to resolve it.

i am pretty jammed up this week, but I will take a look at the project and update it to the latest release of ionic

Try this in the page that has your map:

  constructor(private menuController: MenuController){}

  ngOnInit(): void {
    this.menuController.swipeEnable(false, 'mainMenu');
  }

  ngOnDestroy(): void {
    this.menuController.swipeEnable(true, 'mainMenu');
  }

I think you can also use the ionic events with ViewController, but this works just fine.

Ok - thanks if you could that would be amazing. :slight_smile:

@ihadeed - thanks for suggestion - just tried this on ios but still have the black screen. Again the plugin does work - for example I am able to get my location using your code and print it to the console in Xcode.

.showDialog() also still works.

I tried both the solutions you provided but they worked to no avail.

I did a bit more looking and found that an issue was actually raised on this on the plugins GutHub which led me to a solution using .setClickable().

I hooked into the menuā€™s ionOpen and ionClose events and published custom events which are handled in page containing the map. Depending on which event is published I set the this.map.setClickable(bool) value accordingly.

Appreciate your help though, top guy :+1:

1 Like

Hi William, did you manage to get the maps plugin to work on iOS using ionic beta 10?

Iā€™ve not tried with IOS, I only have Android devices available for testing sorry.