Update Example for Google Map

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
+ *  // <ion-content>
+ *  //  <div #map id="map"></div>  
+ *  // </ion-content>
  *
- * // In Angular 2 or Ionic 2, if we have this element in html: <div #map></div>
- * // 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({