title: Integrating Google Maps to get Current Location in angular 2?
body: <p>How do i use google maps API in angular 2 to get Current location ? i've included the google map in my application. now i want to capture current location  i've attached my code . Please Help me </p>
  
  <pre><code>import { Component,OnInit,ElementRef,ViewChild} from '@angular/core';
  
  // import {searchComponent} from './getLocation.Component';
  declare var google: any;
  
  @Component({
      selector: 'map',
      moduleId:module.id,
      templateUrl:'geoCodeMap.component.html',
  })
  
  export class mapComponent{
      searchBox:any;
      map:any;
      marker:any;
      accuracy:any;
      @ViewChild('mapDiv') mapDiv:ElementRef;
      options={
         center:{
                  lat : 17.555,
                  lng : 78.555
              },
      zoom:15,
      mapTypeControl:false,
      MapTypeId: google.maps.MapTypeId.TERRAIN,
  
      };
  
  
      ngAfterViewInit(){
          this.map=new google.maps.Map(this.mapDiv.nativeElement,this.options); 
          this.getLocation();
          this.onSearchResultSelect();
      }      
      getLocation() 
      {
          if (navigator.geolocation) {
              var self = this;
              navigator.geolocation.getCurrentPosition(function(response){
                  self.showPosition(response, self);
              }, function() {
              alert("Unable to get GPS Location");
              }, {
              enableHighAccuracy : true
              });
          }
          else {
          alert("Geolocation is not supported by this browser.");
          }
      }
  
  
  
      showPosition(position:any, self:any) {
          var icon = {
          url: "images/home.png",
          scaledSize: new google.maps.Size(30, 30), // scaled size
          origin: new google.maps.Point(0,0), // origin
          anchor: new google.maps.Point(0, 0)
      };
      var myLatLng = new google.maps.LatLng(position.coords.latitude,
              position.coords.longitude);
      self.marker = new google.maps.Marker({
          position : myLatLng,
          map:self.map,
          icon:icon,
          draggable : true,
          title : 'Mark Home'
      });
  
      self.map.panTo(myLatLng);
      self.accuracy = position.coords.accuracy;
  
      google.maps.event.addListener(self.map, 'dragstart', function() {
      });  
      google.maps.event.addListener(self.map, 'dragend', function() {
      });
  
  
      google.maps.event.addListener(self.map, 'center_changed', function() {
      });
  
  
  
      }
  
   onSearchResultSelect() {
               var self=this;
           var searchMarker:any;
      var input = document.getElementById('pac-input');
      this.searchBox = new google.maps.places.SearchBox(input);
      var button = document.getElementById('button');
      button.onclick = function() {
      input.value='';
      input.focus();
          var places = this.searchBox.getPlaces();
  
          if (places.length == 0) {
              return;
          }
          if (searchMarker != null) {
              searchMarker.setMap(null);
          }
  
          var empGeocode = self.map.getCenter().lat() + "," + self.map.getCenter().lng();
          var place = places[0];
  
          self.map.setCenter(place.geometry.location);
          //container.html(html);
       }
      }
  
  }
  </code></pre>
  
  <p>I get an error as 'map' undefined when i check the browser's console :( -- Solved .</p>
  
  <p>Edit: I now want to search for a particular location . I've referred to Google Maps API docs . But i got no results.Any idea how my code has to be changed ??</p>