Google Maps into Ionic


#1

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 ‘-’


#2

Did you click on the repo link?

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


#3

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:


#4

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 ?

#5

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.


#6

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!"));
  }
}

#7

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


#8

Bro, thanks a lot, thank you so much


#9

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


#10

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.


#11

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


#12

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


#13

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


#14

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:


#15

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 !


#16

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.


#17

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


#18

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.


#19

Is there somebody with the same issue please?


#20

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