My Name is Kay....

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

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 28990 추천 수 0 댓글 13
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

지명 또는 주소를 입력해서 

이동 수단 별 이동 경로를 알려주는 기능


국내 Driving , Walking 은 잘 안되는듯함...Transit 은 잘 됨..


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


Directions service.png


<!DOCTYPE html>
<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Directions service</title>
	<style type="text/css">
		html, body {
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}

		#map-canvas, #map_canvas {
		  height: 100%;
		}

		@media print {
		  html, body {
			height: auto;
		  }

		  #map_canvas {
			height: 650px;
		  }
		}

		#panel {
		  position: absolute;
		  top: 5px;
		  left: 50%;
		  margin-left: -180px;
		  z-index: 5;
		  background-color: #fff;
		  padding: 5px;
		  border: 1px solid #999;
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
	var directionsDisplay;
	var directionsService = new google.maps.DirectionsService();
	var map;

	function initialize() {
	  directionsDisplay = new google.maps.DirectionsRenderer();
	  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
	  var mapOptions = {
		zoom:7,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: chicago
	  }
	  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	  directionsDisplay.setMap(map);
	}

	function calcRoute() {
	  var start = document.getElementById('start').value;
	  var end = document.getElementById('end').value;
	  var mode = document.getElementById('mode').value;

	  var request = {
		  origin:start,
		  destination:end,
		  travelMode: eval("google.maps.DirectionsTravelMode."+mode)
	  };
	  directionsService.route(request, function(response, status) {
		alert(status);  // 확인용 Alert..미사용시 삭제
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		}
	  });
	}

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

	</script>
	</head>
	<body>
		<div id="panel" >
			<b>Start: </b>
			<input type="text" id="start" />
			<b>End: </b>
			<input type="text" id="end" />
			<div>
				<strong>Mode of Travel: </strong>
				<select id="mode">
				<option value="DRIVING">Driving</option>
				<option value="WALKING">Walking</option>
				<option value="BICYCLING">Bicycling</option>
				<option value="TRANSIT">Transit</option>
				</select>
				<input type="button" value="길찾기" onclick="Javascript:calcRoute();" />
			</div>
		</div>
		<div id="map-canvas"></div>
	</body>
</html>

?
  • ?
    방문객 2013.05.30 17:37

    항상 많은 도움을 받다가 처음으로 댓글을 남기면서 질문이 있습니다.

    출발지를 설정하지 않고 현제 위치를 자동으로 받아주는 방법은 안되는 건가요.

    아직 공부가 많이 부족해서 가능하다면 자세히 가르쳐주시면 감사합니다.

  • ?
    kay 2013.05.31 08:36

    도움이 되셧다니 기쁘네요..


    브라우져에서 현재 위경도 값을 읽어오는 방법입니다..


    gps가 잇다면 좀 더 정확한 데이터가 확인될것같습니다..

    http://www.uhoon.co.kr/API/1200


    읽어온 위경도를 구글맵 마커로 표시해주는 기능입니다.

    http://www.uhoon.co.kr/GoogleAPI/1208

  • ?
    yimcow 2014.02.04 19:08

    이런식으로 안드로이드에서 구현할수도 있을까요?,?

    자바스크립트이니 JSON사용해서 파싱해주면 될지.. 혹시 구현해보셨나요~?

  • ?
    kay 2014.02.06 17:13

    어플쪽은 경험이 전무한지라 요즘 학습중입니다 ㅎㅎ;;


    유사한 기능이 구현된 어플은 많이 봤는데 가능하지 싶네요.


    모바일웹이라고 한다면 당연 가능합니다. 

  • ?
    pulp 2014.09.03 23:12

    예제 감사합니다.

    질문이 있는데요.

    여기서 길찾기를 수행한 후에 그려진 경로에 대한 위치 데이터를 따로 받을 수 있나요?

    3D모델에 위치를 삽입해서 해당 경로를 따라 이동시키려고 합니다.

  • ?
    kay 2014.09.04 08:40

    길찾기 결과에 경로에 대한 위경도 값을 XML 및 JSON 으로 내려주는 기능입니다.

    아래 주소를 한번 보심이 ^^

    https://developers.google.com/maps/documentation/directions/?hl=ko#XML

  • ?
    dong 2014.11.13 10:55

    지금 iot과정에서 안드로이드 앱 과정을 진행중인 학생입니다.


    api를 통해서 간단한 네비를 제작 할 수 있을까요?

  • ?
    kcyck 2015.04.16 00:08

    정말감사합니다. 마커찍는 것 까지는 성공했는데 그 마커를 이어줄때 폴리라인으로 하니깐 그냥 직선으로만 나오고 순서도 없이 나와서 헤맸는데


    정말 큰도움이 되었습니다. 감사합니다. ^^

  • ?
    kay 2015.04.17 15:16

    도움이 되셧다니 기쁩니다. 즐프하세요!!

  • ?
    chris 2015.07.19 13:05

    안녕하세요 ^^ 홈페이지 보면서 구글 api를 공부하고 있습니다. 도움이 많이 되네요!

    혹시 A와 B지점 사이의 길찾기를 하면서 중간 노드들의 위도/경도를 받아올 수 있는 방법이 있을까요?

    경로가 어떻게 draw(?)되는지 모르겠네요 ^ㅇ^ ;;

    다른 예제를 보니 getCurrentPosision() 같은 함수도 있던데 잘 못찾겠습니다 ㅠ_ㅠ;

  • ?
    kay 2015.08.05 13:30 Files첨부 (1)

    댓글이 좀 늦었습니다..ㅠㅠ 요즘 치과 치료에... 머리가..휑하네요


    원하시는 좌표 배열은 

    directionsService Response 데이터 안에 있습니다.

    response.routes[0].overview_path[1] 와 같이 쓰실수 있구요.

    크롬 개발자 도구에서도 확인 가능하시구요..


    이미지 13.jpg


    그려지는 방법에 대해서는 directionsDisplay.setDirections(response); 살펴보시면 되실듯하구요.

    그 밖에 활용 예제는 https://developers.google.com/maps/documentation/javascript/examples/directions-complex 

    참고하시면 도움이 되실것같습니다.

  • ?
    chris 2015.08.16 15:22

    헐... 저는 안보시는줄 알았는데 이렇게 상세한 답변을 달아주셔서 정말 감사드립니다!

  • ?
    kay 2015.08.18 08:48

    육아에 전념(?) 하다보니...이래저래 좀 늦었습니다만 이렇게 봐주시니 또 기분이 좋습니다..^^


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