github/awesome-cordova-plugins
github/awesome-cordova-plugins
2
0
Fork 1
mirror of https://github.com/danielsogl/awesome-cordova-plugins.git synced 2024-10-07 00:18:08 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #764 from shamsher31/patch-1

Browse Source 
Update Example for Ionic Native Google Map
This commit is contained in:
Max Lynch 2016-11-20 08:16:57 -06:00 committed by GitHub
commit 28f4680575
1 changed files with 48 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/plugins/googlemap.ts
View File

@ -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({