Ionic2 + native google maps

Ionic Framework ionic-v3
1

I am trying to integrate google maps into my application and I have taken code from the ionic2 website, however, getting this error:

Uncaught in promise: [object, Object]

My .ts file

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

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

  map;

  constructor(public navCtrl: NavController) {

  }

  ngAfterViewInit() {
    this.loadMap();
  }

    loadMap() {
   // make sure to create following structure in your view.html file
   // and add a height (for example 100%) to it, else the map won't be visible
   // <ion-content>
   //  <div #map id="map" style="height:100%;"></div>
   // </ion-content>

   // create a new map by passing HTMLElement
   let element: HTMLElement = document.getElementById('map');

   let map = new GoogleMap(element);

   // listen to MAP_READY event
   map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));

   // create LatLng object
   let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

   // create CameraPosition
   let position: CameraPosition = {
     target: ionic,
     zoom: 18,
     tilt: 30
   };

   // move the map's camera to position
   map.moveCamera(position);

   // create new marker
   let markerOptions: GoogleMapsMarkerOptions = {
     position: ionic,
     title: 'Ionic'
   };

   map.addMarker(markerOptions)
     .then((marker: GoogleMapsMarker) => {
        marker.showInfoWindow();
      });
   }
}

and my .html file

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

 <ion-content>
  <div #map id="map" style="height:100%;"></div>
 </ion-content>

I am really struggling and can’t really understand why it is not working. I have set up the keys and installed the plugin. (followed the tutorial from: http://ionicframework.com/docs/v2/native/google-maps/)

2

Hi @vikneke :slight_smile:

If you are trying to implement Google maps javascript API’s refer these links, hope it might be helpful

angular2-google-maps
angular-maps

3

He is running the native plugin accordingly with the sample shown on Ionic docs, and I have the same issue. Can’t figure out why at the moment but I will get into it and found a solution.

Don’t forget Ionic 2 is still new and a few bugs can appear so we just have to be patient with it, anyway if someone already found a solution for it don’t hesitate to share

4

I ended up using javascript api instead, which is not native but works!

5

i am using the same code, the only difference is I have a promise chain

this.map.moveCamera returns a promise and so does this.map.addMarker

6

Can you share the code? I have the same issue, I want to add static markers on a map and have it zoomed in my city