Skip to content

Instantly share code, notes, and snippets.

@ihadeed
Last active September 8, 2017 04:49
Show Gist options
  • Save ihadeed/9e6cb11eb3ab3efc8ccf3a08ced90bf7 to your computer and use it in GitHub Desktop.
Save ihadeed/9e6cb11eb3ab3efc8ccf3a08ced90bf7 to your computer and use it in GitHub Desktop.
Ionic 2 + Ionic Native + Google Maps Plugin
import { Component, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
import { Platform } from 'ionic-angular';
import { GoogleMap } from 'ionic-native';
@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, message)=>{
if(!isAvailable) return console.warn(message);
this.map = new GoogleMap(this.id);
this.init.emit(this.map);
});
});
}
}
import {Component} from '@angular/core';
import {
GoogleMap, CameraPosition, GoogleMapsLatLng, GoogleMapsMarkerOptions,
GoogleMapsMarker
} from 'ionic-native';
@Component({
template: `<ion-header>
<ion-navbar>
<ion-title>Map</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<GoogleMap (init)="onMapInit($event)"></GoogleMap>
</ion-content>`,
directives: [GoogleMapComponent]
})
export class MapPage {
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();
}
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment