구글맵 V3이용한 지오로케이션(Google Maps JavaScript V3)

MyLocationMap.zip

 

구글맵스 v3관련 자료 찾아보니 폰갭이니 하는 하이브리드 앱을 써야 쉽게 되는듯..

 

그래도 간단하게 해보자는 심정으로 이리저리 뒤지고 다녔더니 결국 완성했다. ㅎ

 

기본 소스는 구글 API 레퍼런스에서 가져왔다.

 

자세한건 이쪽에->> google api page.

 

MainActivity에는 웹뷰와 위치를 찾기위한 퍼미션을 추가했다.

 

참고한 사이트는 이곳 ->> site

 

실행모습

 

 

소스는 아주 간단하다..

 

 

MainActivity.java

public  class MainActivity extends Activity implements GeolocationPermissions.Callback {
   
   
    WebView mapview;    //just webview.
    String url="file:///android_asset/www/index.html";  //local html file
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
       
        mapview=(WebView) findViewById(R.id.mapview);   //casting webview
        mapview.getSettings().setJavaScriptEnabled(true);                       //webview options
        mapview.getSettings().setGeolocationEnabled(true);                      //
        mapview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);   //
       
        Geoclient geoclient=new Geoclient();    //casting class
       
        mapview.setWebChromeClient(geoclient);  //set webchromeclient for permission
        String origin="";  
        geoclient.onGeolocationPermissionsShowPrompt(origin,this);  //for permission
        mapview.loadUrl(url);
    }
        public void invoke(String origin, boolean allow, boolean retain) {
       
       
    }
       
    class Geoclient extends WebChromeClient{    //for display mylocation
        @Override
        public void onGeolocationPermissionsShowPrompt(String origin,Callback callback){
           
            super.onGeolocationPermissionsShowPrompt(origin, callback);
            callback.invoke(origin,true,false);
        }
       
    }
 }

index.html(js 부분)

 

var map;
 
function initialize() {
  var mapOptions = {
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
 
  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
 
      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });
 
      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}
 
function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }
 
  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };
 
  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>