html5의 지오로케이션(geolocation)을 이용해서 위치를 가져온 후 구글맵에 넣는 코드

html에 아래 엘리먼트를 추가해 준다.

<div id="map-canvas"></div>

자바스크립트 부분에 아래 코드를 넣어준다.

window.onload = getLocation; 
function getLocation(){
	if(navigator.geolocation){
		navigator.geolocation.getCurrentPosition(locationSuccess, locationError, geo_options);
	}else{
		console.log("지오 로케이션 없음")
	}
};
// getLocation
var latitude, longitude;
function locationSuccess(p){
	latitude = p.coords.latitude,
	longitude = p.coords.longitude;
    initialize();
}
// locationSuccess
function locationError(error){
	var errorTypes = {
		0 : "무슨 에러냥~",
		1 : "허용 안눌렀음",
		2 : "위치가 안잡힘",
		3 : "응답시간 지남"
	};
	var errorMsg = errorTypes[error.code];
}
// locationError

var geo_options = {
  enableHighAccuracy: true,
  maximumAge        : 30000,
  timeout           : 27000
};
// geo_options
var map;
function initialize() {
    var myLatLng = new google.maps.LatLng(latitude, longitude);
    var mapOptions = {
        zoom: 16,
        center: myLatLng
    };
    var image = './images/Luffys-flag-icon.png';
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });
    //html 문서안에 map-canvas 엘리먼트에 맵을 그리라고 하는 것임
}

//google.maps.event.addDomListener(window, 'load', initialize);