2016-11-15 4 views
3

角度2でGoogleマップAPIを使用して現在地を取得するにはどうすればよいですか?私は自分のアプリケーションにGoogleマップを含めました。今私は私のコードを添付している現在の場所をキャプチャしたい。 。私は、ブラウザのコンソールを:(チェックしたときに「マップ」は未定義として、私はエラーを取得する私にGoogleマップを統合して現在の位置を角度2に取得しますか?

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); 
    } 
    } 

} 

を助けてください - 解決

編集:私は今、特定の場所を検索したい私はしましたGoogleマップのAPIドキュメントを参照しかし、私は私のコードは

+0

その行にはどのようなエラーが表示されますか? –

+0

ブラウザから現在の場所を取得する場合は、Googleマップを統合する必要はありません。ここには、この目的のために利用できるオープンソースのコンポーネントがあります。https://github.com/tixdo/ng2-location – Satendra

+1

@AlexanderCiesielski私はライン上でエラーが発生しました:map:this.map。だから私はselfという名前の変数にこれを割り当てました。今は働いている。 – CruelEngine

答えて

2

は、検索のためgoogle.maps.placesを使用することを検討して??変更する必要がありますどのように何results.Anyのアイデアを持っていない

がここに詳細を参照してください。。。https://developers.google.com/maps/documentation/javascript/places

+1

これで分かりました:)助けてくれてありがとう。 :D – CruelEngine

+0

問題ありません、お楽しみを! – Amit

関連する問題