Integrating Google Maps to get Current Location in angular 2?

Question

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 ??

Answer 1

Consider using the google.maps.places for searches.

See more here: https://developers.google.com/maps/documentation/javascript/places