Google Maps into Ionic

Hi guyss, i have a issue when i try add google maps in my application,
I generate a sample app with ionic start my-project tutorial --ts --v2 , and added the google maps, as says here http://ionicframework.com/docs/v2/native/google-maps/, but always give me the same error
"Uncaught (in promise): Reference plugin is not defined" even i deploy in my device ‘-’

Did you click on the repo link?

I think you need the API keys for whatever phone platform you’re going to use.

yep, i did like this ionic plugin add https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID=“my_key_was_here” --variable API_KEY_FOR_IOS=“my_key_was_here” , but doesn’t work, even in my device :frowning:

guy, now i can run, the event Map is ready shows, but the maps doesnt show ‘-’

home.html

      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding class="home">
      <h2>Welcome to Ionic!</h2>
      <div id="map"></div>
    </ion-content>```

home.ts
    `import {Component} from '@angular/core';
    import {NavController} from 'ionic-angular';
    import { GoogleMap, GoogleMapsEvent } from 'ionic-native';

    @Component({
      templateUrl: 'build/pages/home/home.html'
    })
    export class HomePage {
      constructor(private navCtrl: NavController) {
        // somewhere in your component
        let map = new GoogleMap('map');

        map.on(GoogleMapsEvent.MAP_READY).subscribe(()=> { console.log("other is ready" )});
      }
    }`


home.scss
 
    .home {
    }
    #map {
        width: 100%;
        height: 100%;
    }

what's wrong ? '=' can u help me ?

Hello, assuming your API keys are correct, instead of putting the map directly in your constructor, try something like this:

this.platform.ready().then(() => this.setupGoogleMap());

Also, if I remember correctly, the Google maps will only show up on a device or emulator and not the browser.

1 Like

finally i got it, now the maps loades, but now he is blank, doesn’t show anything '-'
look the image https://postimg.org/image/qm9j7dy1z/
i’m sorry, i new in ionic 2 "/
i made this way, can you help me ?

import {Component} from '@angular/core';
import {NavController, Platform} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent, GoogleMapsMarker, GoogleMapsLatLng} from 'ionic-native';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  private map;
  constructor(private navCtrl: NavController,private platform:Platform) {
    this.platform.ready().then(() => {
        this.setupGoogleMap()
       });
    }
    
    


  setupGoogleMap(){
    // somewhere in your component
    this.map = new GoogleMap('map');

    let marker = new GoogleMapsMarker(this.map);
    marker.setTitle("Teste");
    let latLng = new GoogleMapsLatLng(-53.6339946,-76.6077185);
    marker.setPosition(latLng);

    this.map.setCenter(latLng);
    this.map.setZoom(12);

    this.map.on(GoogleMapsEvent.MAP_READY)
    .subscribe(() => console.log("Map is ready!"));
  }
}

If your map is loading but it is blank, your API keys are probably missing or incorrect. Check out this repo for a working example: https://github.com/aaronksaunders/ionic2GMapNative

1 Like

Bro, thanks a lot, thank you so much

1 Like

You’re welcome. Glad you got it all figured out. :slight_smile:

Hi,
I have a similar problem. I added a plugin and everything (I think so). But I always getting the same error: Error TS2339: Property ‘map’ does not exist on type ‘MapPage’. I tried everything and I don’t know what to do.

Hello all of you, Can you please help me for solving google map with latest release of ionic v2 i-e ionic v2 rc. I am included google map plugins but not luck for showing google map browser as well as ios simulator, device also. I am getting this error


My system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.9.0
Xcode version: Xcode 8.1 Build version 8T29o

Please help me, Thank you

You should test your code on a device because cordova plugins don’t work in a browser.
ionic run ios or ionic run android

Thanks u all of solve the problem.
By using this http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/

1 Like

I found Josh Morony’s tutorial very helpful to get the native map up. Does anyone know how to push markers to the native map? I need to be able to show a list of locations but everything I try fails so end up back to the blank map with current location but no markers which is not that useful!

I am new to ionic 2 so would appreciate any pointers? :slight_smile:

Hey guys ! I am building an app and I would need 2 google maps instance on 2 different pages (in a table navigation). I know that this is technically not possible, but I was wondering if there were a workaround like loading the maps in an other view and importing this view into my pages.

Thanks !

I’ve created an Ionic 2.0.0-rc.5 starter with minimal functionality https://github.com/0x1ad2/ionic2-starter-google-maps maybe that coud help you out.

Hey hello guys, somebody knows how to trace a route in ionic 2? The routes are fixed, for example, I want to develop an app to show the routes of the buses which pick up the workers.

So, somebody knows how to do this (the map with the routes)?

Thanks

In the current stable version of the google-maps-plugin (1.4.0) it isn’t possible.

Mabe the will build-in such feature in the 2.x version.

Is there somebody with the same issue please?

how can i put marker on the map in a specific location?