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