title: display and view geofencing in googlemaps using ionic2
body: <p>i am developing an ionic 2 application, i am coding on a geofencing feature using ionic native geofence, i am able to set geofence radius data and get current location, but unable to to view it visually on google map, have included screenshot of desired output below</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ion-item&gt;
     &lt;ion-range [(ngModel)]="formData.radius" ngControl="radius" name="radius" #radius="ngModel" min="40" max="200" color="primary" pin="true" snaps="true" step="10"&gt;
     &lt;/ion-range&gt;
  &lt;/ion-item&gt;
  </code></pre>
  
  <p><strong>TypeScript</strong></p>
  
  <pre><code>import { Geolocation, Geofence } from 'ionic-native';
  
  export class PlaceAddPage {
   radius:number = 100;
  
   constructor(private platform: Platform) {
    this.platform.ready().then(() =&gt; {
    // initialize the plugin
    Geofence.initialize().then(
      // resolved promise does not return a value
      () =&gt; console.log('Geofence Plugin Ready'),
      (err) =&gt; console.log(err)
     )
    })
   }
  
  
   initMap() {
    Geolocation.getCurrentPosition().then((position) =&gt; {
     let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     let latLng1 = new google.maps.LatLng(13.0608842, 80.2221805);
     let GooleMap = new google.maps.Map(document.getElementById('mapfence'), {
      center: latLng,
      zoom: 15
     });
     let marker = new google.maps.Marker({
      position: latLng,
      map: GooleMap,
      title: 'My Location',
     });
    });
   }
  }
  </code></pre>
  
  <p><strong>Desired Output</strong></p>
  
  <p><a href="https://i.stack.imgur.com/tRqIF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tRqIF.png" alt="enter image description here"></a></p>