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
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); } } } I get an error as 'map' undefined when i check the browser's console :( -- Solved .
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 ??