My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

현재 위치를 읽어와서 구글맵에 마커를 표시해주는 기능입니다.


Test Url : http://www.uhoon.co.kr/test/1208.html


getCurrentPosition+googlemap.png


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>getCurrentPosition + Googlemap marker </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
<!--
	function fnGetCurrentPosition() {
	  	if (navigator.geolocation)
		{
			$("#latlng").html("");
			$("#errormsg").html("");
			navigator.geolocation.getCurrentPosition (function (pos)
			{
				lat = pos.coords.latitude;
				lng = pos.coords.longitude;

				$("#latlng").html("latitude : " + lat + "<br/> longitude : "+ lng);

				var mapOptions = {
					zoom: 16,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					center: new google.maps.LatLng(lat,lng)
				};

				map = new google.maps.Map(document.getElementById('map'),mapOptions);

				var myIcon = new google.maps.MarkerImage("http://google-maps-icons.googlecode.com/files/restaurant.png", null, null, null, new google.maps.Size(17,17));
				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(lat,lng),
					map: map,
					draggable: false,
					icon: myIcon
				});
				markers.push(marker);
			},function(error)
			{
				switch(error.code)
				{
					case 1:
						$("#errormsg").html("User denied the request for Geolocation.");
						break;
					case 2:
						$("#errormsg").html("Location information is unavailable.");
						break;
					case 3:
						$("#errormsg").html("The request to get user location timed out.");
						break;
					case 0:
						$("#errormsg").html("An unknown error occurred.");
						break;
				}
			});
		}
		else
		{
			$("#errormsg").html("Geolocation is not supported by this browser.");
		}
	}
//-->
</script>
</head>
<body>
<div id="errormsg"></div>
<div id="latlng"></div>
<input type="button" value="GetCurrentPosition " onclick="Javascript:fnGetCurrentPosition();" />
<div id="map" style="width:760px;height:400px;margin-top:20px;"></div>
</body>
</html>



getCurrentPosition 자세히 알아보기 : http://www.uhoon.co.kr/API/1200


?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
20 map 구글맵 v3 infoBox file kay 2015.12.29 2932
19 map 구글맵 v3 단순 다중 마커 (배열이용) 2 file kay 2015.12.28 10249
18 map 구글맵 마커 + 말풍선 - v3 2 file kay 2015.02.05 3275
17 map 구글맵 v3 맵상에 보여지는 마커만 생성하기 5 file kay 2014.08.04 7594
16 map 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 24 file kay 2014.07.17 16905
15 기타 Google 웹사이트 번역기 2 file kay 2014.04.21 5316
14 map Google Places API를 이용한 주변 지역 정보 검색 26 file kay 2013.10.18 21294
13 map GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 " 2 file kay 2013.08.28 5240
12 map 구글맵 API 적용범위 (Google Maps API Coverage) kay 2013.08.27 4974
11 map google 스트릿뷰 "Street View" file kay 2013.08.27 4704
» map 브라우져에서 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition + Googlemap marker ) file kay 2013.05.31 24273
9 map 구글맵 출발지 도착지 주소입력해서 길찾기 - v3 13 file kay 2013.05.03 28986
8 map 모바일 웹 - 위치정보(GPS) + 마커 + 카톡 + 카스 연동 file kay 2013.04.24 10239
7 map 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 file kay 2013.04.22 14702
6 map geocode - 주소로 위경도 검색 v3 file kay 2013.04.21 8047
5 map 구글맵 마커 + 말풍선 - v2 kay 2013.02.06 10978
4 map geocode - 구글 맵 위경도 검색 v2 kay 2013.02.06 7295
3 Graph 막대 그래프 kay 2013.02.06 8496
2 Graph 선 + 막대 그래프 kay 2013.02.06 8653
1 Graph 선 그래프 file kay 2013.02.06 6296
Board Pagination Prev 1 Next
/ 1