A 지점에서 B 지점으로 이동할 수 있는 매핑 앱과 서비스가 많이 있지만 지도의 절대적인 왕은 Google 지도입니다. 컴퓨터, 태블릿, 스마트폰에서 90%를 사용합니다. 최고의 데이터, 가장 많은 탐색 및 경로 지정 옵션, 스트리트 뷰, 걷기, 자전거 타기, 대중교통 정보와 같은 멋진 기능을 제공합니다.
하지만 Google 웹사이트 외부에서 지도나 길찾기를 사용해야 하는 경우에는 어떻게 해야 합니까? 귀하의 결혼식 웹사이트나 개인 블로그가 있고 손님이 귀하의 사이트를 방문하고 주소를 입력하면 이벤트 장소까지 자동으로 안내를 받을 수 있다고 가정해 보겠습니다.
글쎄, 당신이 이것을 달성하기 위해 갈 수 있는 몇 가지 방법이 있습니다. 가장 쉬운 방법은 Google 지도에서 생성한 삽입 코드를 사용하여 웹페이지에 지도를 삽입하는 것입니다. 두 번째 방법은 좀 더 기술적이지만 더 사용자 지정 가능하고 동적입니다. 아래에서 두 가지 방법을 모두 언급하겠습니다.
Google 지도 삽입
한 위치에서 다른 위치로의 길찾기만 표시하려는 경우 가장 쉬운 방법은 포함 코드를 사용하여 보고 있는 지도를 포함하는 것입니다. 먼저 Google 지도에서 원하는 방향을 설정한 다음 페이지 오른쪽 하단에 있는 톱니바퀴 아이콘을 클릭하세요.
지도 공유 또는 삽입을 클릭합니다. 그런 다음 지도 삽입을 클릭합니다. 탭. 여기에서 지도의 크기를 선택한 다음 iframe 코드를 복사하여 원하는 웹페이지에 놓을 수 있습니다.
이 방법의 유일한 단점은 사용자가 정적 지도를 볼 수 있다는 것입니다. 아래 두 번째 방법에서는 사용자가 시작 주소를 입력할 수 있는 양식을 만들 수 있으며 해당 주소에서 선택한 대상 주소까지의 지도를 생성합니다.
Google 지도 양식 만들기
두 번째 방법이 의미하는 바를 설명하기 위해 아래 상자에 미국 주소를 입력하여 현재 위치에서 내 집까지의 경로를 확인하세요.
멋지죠? 웹사이트, 블로그 또는 HTML 코드를 넣을 수 있는 곳이면 어디든지 이 작은 양식을 쉽게 만들 수 있습니다! 주소를 복사하고 새 창을 연 다음 시작 주소를 입력할 필요 없이 연락처 페이지에 게시할 수 있고 사람들이 빠르게 길을 찾을 수 있으므로 소규모 비즈니스 웹 사이트에도 유용합니다.
이 수정된 길찾기 상자를 만드는 방법은 무엇입니까? 먼저 Google에서 길찾기에 사용하는 URL에 대한 올바른 구문을 가져와야 합니다. 운 좋게도 우리는 두 장소 사이의 길을 찾은 다음 주소 표시줄에서 URL을 복사하여 알아낼 수 있습니다. 페이지 오른쪽 하단에 있는 작은 톱니바퀴 아이콘을 클릭하고 지도 공유 또는 삽입을 선택할 수도 있습니다. .
링크 공유 탭에는 브라우저 주소 표시줄의 URL과 동일한 URL이 포함됩니다. 어떻게 생겼는지 보여드리기 위해 전체 URL을 아래에 붙여넣었습니다.
https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd, +알렌,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ 데이터=!3m1!4b1!4m13!4m12!1m5!1m160!1s0x864c3d53018517a5:0x 1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892
좋아요! 꽤 깁니다! 거기에는 많은 것들이 있는데, 대부분은 의미가 없습니다! Google Maps URL 매개변수는 매우 간단하고 쉬웠지만 새로운 URL 구조는 상당히 복잡합니다. 고맙게도 이전 매개변수를 계속 사용할 수 있으며 Google에서 자동으로 새 버전으로 변환합니다. 무슨 말인지 보려면 아래 링크를 확인하세요.
https://maps.google.com/maps?saddr=start&daddr=end
한 번 시도해 보세요. 시작 및 끝 주소에 대한 주소를 따옴표로 묶고 URL을 브라우저에 붙여넣으세요! 저는 제 고향인 뉴올리언스에서 시작하여 텍사스주 휴스턴으로 끝나는 곳을 바꾸었습니다. 따라서 제 Google 지도 길찾기 URL은 다음과 같습니다.
https://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”
작동합니다! 그러나 보시다시피 Google 지도는 지도가 완전히 로드되면 링크를 훨씬 더 복잡한 것으로 변환합니다. 자, 이제 Google 지도에 전달할 수 있는 정상적인 URL이 있으므로 시작 주소와 대상 주소의 두 필드가 있는 간단한 양식을 만들어야 합니다.
사람들이 주소를 입력하고 귀하의 장소로 가는 길을 찾도록 하려면 두 번째 필드가 숨겨져 있고 이미 목적지 주소로 설정되어 있기를 원할 것입니다.
위의 코드를 확인하십시오. 첫 번째 줄은 양식으로 시작하고 제출 버튼을 클릭하면 데이터가 maps.google.com/maps로 보내져야 한다고 말합니다. 대상=공백 결과가 새 창에서 열리길 원한다는 것을 의미합니다. 그런 다음 비어 있는 시작 주소에 대한 텍스트 상자가 있습니다.
두 번째 텍스트 상자는 숨겨져 있고 값은 우리가 원하는 대상 주소입니다. 마지막으로 "길찾기"라는 제목의 제출 버튼이 있습니다. 이제 누군가 주소를 입력하면 다음과 같이 표시됩니다.
몇 가지 추가 매개변수를 사용하여 길찾기를 사용자 정의하고 더 많은 지도를 작성할 수 있습니다. 예를 들어 기본 보기가 지도가 아니라 위성이 되기를 원한다고 가정해 보겠습니다. 트래픽 표시 .
https://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
layer=t 확인 및 t=h URL의 필드. layer=t는 트래픽 레이어이고 t=h는 하이브리드 맵을 의미합니다! 그 m으로 설정할 수도 있습니다. 노멀 맵의 경우 k 위성 및 p 지형용. z 는 확대/축소 수준이며 1에서 20까지 변경할 수 있습니다. 위의 URL에서는 7로 설정되어 있습니다. 이 값을 최종 URL에 추가하기만 하면 사이트에 고도로 맞춤화된 Google 지도 길찾기 양식이 생깁니다!
문제가 있는 경우 댓글을 작성해 주시면 도와드리겠습니다. 즐기세요!