diff --git a/src/plugins/googlemap.ts b/src/plugins/googlemap.ts index 33a08d3e6..3be68e87d 100644 --- a/src/plugins/googlemap.ts +++ b/src/plugins/googlemap.ts @@ -41,46 +41,63 @@ export const GoogleMapsAnimation = { * @description This plugin uses the native Google Maps SDK * @usage * ``` - * import { GoogleMap, GoogleMapsEvent } from 'ionic-native'; + * import { + * GoogleMap, + * GoogleMapsEvent, + * GoogleMapsLatLng, + * CameraPosition, + * GoogleMapsMarkerOptions, + * GoogleMapsMarker + * } from 'ionic-native'; * - * // create a new map using element ID - * let map = new GoogleMap('elementID'); + * export class MapPage { + * constructor() {} * - * // or create a new map by passing HTMLElement - * let element: HTMLElement = document.getElementById('elementID'); + * // Load map only after view is initialize + * ngAfterViewInit() { + * this.loadMap(); + * } + * + * loadMap() { + * // make sure to create following structure in your view.html file + * // + * //
+ * //
* - * // In Angular 2 or Ionic 2, if we have this element in html:
- * // then we can use @ViewChild to find the element and pass it to GoogleMaps - * @ViewChild('map') mapElement; - * let map = new GoogleMap(mapElement); + * // 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!')); + * // 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 LatLng object - * let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802); + * // create CameraPosition + * let position: CameraPosition = { + * target: ionic, + * zoom: 18, + * tilt: 30 + * }; * - * // create CameraPosition - * let position: CameraPosition = { - * target: ionic, - * zoom: 18, - * tilt: 30 - * }; + * // move the map's camera to position + * map.moveCamera(position); * - * // move the map's camera to position - * map.moveCamera(position); + * // create new marker + * let markerOptions: GoogleMapsMarkerOptions = { + * position: ionic, + * title: 'Ionic' + * }; * - * // create new marker - * let markerOptions: GoogleMapsMarkerOptions = { - * position: ionic, - * title: 'Ionic' - * }; - * - * map.addMarker(markerOptions) - * .then((marker: GoogleMapsMarker) => { - * marker.showInfoWindow(); - * }); + * map.addMarker(markerOptions) + * .then((marker: GoogleMapsMarker) => { + * marker.showInfoWindow(); + * }); + * } + * + * } * ``` */ @Plugin({