Problem with Google Maps and Ionic 2. Missing plugin

1

Good morning,

I'm trying to show Google Maps in my app on Ionic2.

The following warnings are being given to me by console:

  

Native: tried accessing the GoogleMap plugin but it's not installed.

     

Install the GoogleMap plugin: 'ionic plugin add plugin.google.maps.Map'

I have already added the plugin theoretically with this instruction.

  

cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_API_KEY_IS_HERE"

In fact, if I execute it again, it gives me the message:

Plugin "cordova-plugin-googlemaps" already installed on android.

I do not know what else to do. I have followed step by step tutorials of all kinds and color. And there is no way to show the map.

The code:

Component.ts

    import { Component } from '@angular/core';

import {NavController, Platform} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng} from 'ionic-native';

@Component({
    templateUrl: 'location-page.html'
})
export class LocationPage {

    private map: GoogleMap;
    constructor(private navCtrl: NavController,private platform:Platform) {
    this.platform.ready().then(() => {
        this.setupGoogleMap()
       });
    }

    setupGoogleMap(){
    // somewhere in your component
    try{
        let location = new GoogleMapsLatLng(40.409202,-3.732649);
        this.map = new GoogleMap('map', {
            'backgroundColor': 'white',
            'controls': {
                'compass': true,
                'myLocarionButton': true,
                'indoorPicker': true,
                'zoom': true
            },
            'gestures': {
                'scroll': true,
                'tilt': true,
                'rotate': true,
                'zoom': true
            },
            'camera': {
                'latLng': location,
                'tilt': 30,
                'zoom': 15,
                'bearing': 50
            }
        });
       this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
           console.log('Map is ready!');
       })
    } catch(e){
        e => console.log(e);
    }

  }
    latitud: number = 40.409202;
    longitud: number = -3.732649;

}

component.html

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

Code after trying the link: link

export class LocationPage {

    private map: GoogleMap;
    constructor(private navCtrl: NavController) {}

        lat: number = 51.678418;
        lng: number = 7.809007;

HTML:

<ion-col>
      <sebm-google-map [latitude]="lat" [longitude]="lng">
        <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
      </sebm-google-map>
      </ion-col>

It still does not work even though it no longer fails.

    
asked by Findelias 07.04.2017 в 15:15
source

1 answer

1

Remember that this plugin is native that is, it can only be seen on a mobile device, try it with your cell phone by connecting it to your computer and run it with

ionic run android

or

ionic run ios

You must see the map correctly.

If you need the guide to try it step by step depending on your device, go to the following ionic 2 link: link

Remember that you only see it on your real device, not on any emulator.

Any problem related to your api key, go to the page: angular-maps.com/docs/getting-started.html where it explains how to get it and apply it to your project.

    
answered by 08.04.2017 / 04:47
source