A 지점에서 B 지점으로 이동할 수 있는 지도 작성 앱과 서비스^{(apps and services)} 가 너무 많지만 지도 의 최고봉은 Google Maps 입니다. 저는 컴퓨터, 태블릿 및 스마트폰에서 90%의 시간을 사용합니다. 최고의 데이터, 가장 많은 탐색 및 경로 지정 옵션, 스트리트 뷰, 걷기^{(Street View and walking)} , 자전거 타기 및 대중 교통 정보와^{(biking and mass transit info)} 같은 멋진 기능이 있습니다 .

그러나 Google 웹사이트 외부 에서 지도나 길찾기^{(map or directions)} 를 사용해야 하는 경우에는 어떻게 해야 합니까? 자신의 결혼식 웹사이트^{(wedding website)} 나 개인 블로그가 있고 손님^{(blog and guests)}  이 귀하의 사이트를 방문하고 주소를 입력하면 이벤트 장소 까지 자동으로 안내를 받을 수 ^{(event location)}있다고 가정^(Suppose) 합니다 !

글쎄, 당신이 이것을 달성하기 위해 갈 수 있는 몇 가지 방법이 있습니다. 가장 쉬운 방법은 Google 지도^{(Google Maps)} 에서 생성한 삽입 코드를 사용하여 웹페이지에 지도를 삽입하는 것 입니다. 두 번째 방법은 좀 더 기술적이지만 더 사용자 지정 가능하고 동적입니다. 아래에서 두 가지 방법을 모두 언급하겠습니다.

Google 지도 삽입

한 위치에서 다른 위치로의 길찾기만 표시하려는 경우 가장 쉬운 방법은 포함 코드를 사용하여 보고 있는 지도를 포함하는 것입니다. 먼저 ^(First)Google 지도^{(Google Maps)} 에서 원하는 방향을 설정 한 다음 페이지 오른쪽 하단에 있는 톱니바퀴 아이콘을 클릭합니다.

지도 공유 또는 포함^{( Share or embed map)} 을 클릭 한 다음 지도^{(Embed map)} 포함 탭을 클릭합니다. 여기에서 지도의 크기를 선택한 다음 iframe 코드^{(iframe code and drop)} 를 복사하여 원하는 웹페이지에 놓을 수 있습니다.

이 방법의 유일한 단점은 사용자가 정적 지도를 볼 수 있다는 것입니다. 아래 두 번째 방법에서는 사용자가 시작 주소를 입력할 수 있는 양식을 만들 수 있으며 해당 주소에서 선택한 대상 주소 까지의 지도를 생성합니다.^{(destination address)}

Google 지도 양식 만들기

두 번째 방법이 의미하는 바를 설명하기 위해 아래 상자에 미국 주소^{(US address)} 를 입력하여 현재 위치에서 내 집까지의 길찾기를 확인하세요.

멋진 응^{(Cool huh)} ? 웹사이트, 블로그 또는 HTML 코드^{(HTML code)} 를 삽입할 수 있는 곳이면 어디든지 이 작은 양식을 쉽게 만들 수 있습니다 ! 주소를 복사하고 새 창을 연 다음 시작 주소 를 입력할 필요 없이 ^{(starting address)}연락처 페이지^{(contact page and people)} 에 게시 할 수 있고 사람들이 빠르게 길을 찾을 수 있으므로 소규모 비즈니스 웹^{(business web)} 사이트에도 유용 합니다 .

이 수정된 길찾기 상자를 만드는 방법은 무엇입니까? 먼저 ^(Well)Google 에서 길찾기에 사용하는 ^(Google)URL 에 대한 올바른 구문을 가져와야 합니다 . 운 좋게도 우리는 두 장소 사이의 길을 찾은 다음 주소 표시줄 에서 ^{(address bar)}URL 을 복사하여 알아낼 수 있습니다 . 페이지 오른쪽 하단에 있는 작은 톱니바퀴 아이콘을 클릭하고 지도 공유 또는 포함^{(Share or embed map)} 을 선택할 수도 있습니다 .

공유 링크^{(Share link)} 탭에는 브라우저 주소 표시줄^{(browser address bar)} 의 URL 과 동일한 URL 이 포함됩니다 . 어떻게 생겼는지 보여주기 위해 아래에 전체 URL^{(URL below)} 을 붙여넣었습니다 .

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

좋아! 꽤 깁니다! 거기에는 많은 것들이 있는데, 대부분은 의미가 없습니다! Google Maps URL 매개변수는 매우 간단하고 쉬웠지만 새로운 URL 구조^{(URL structure)} 는 상당히 복잡합니다. 고맙게도 이전 매개변수를 계속 사용할 수 있으며 Google 에서 자동으로 새 버전으로 변환합니다. 무슨 말인지 보려면 아래 링크를 확인하십시오.

http://maps.google.com/maps?saddr=start&daddr=end

가서 한 번 해보세요. 시작 및 끝 주소에 대한 주소를 따옴표로 묶고 URL 을 브라우저에 붙여넣으^{(address and paste)} 세요 ! 저는 제 고향인 ^{(home city)}뉴올리언스 로 시작하고 텍사스주 ^{(New Orleans)}휴스턴^(Houston) 으로 끝나는 곳을 바꾸었습니다 . 따라서 제 Google 지도^{(Google Maps)} 길찾기 URL 은 다음과 같습니다.

http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”

효과가있다! 그러나 보시다시피 Google 지도^{(Google Maps)} 는 지도가 완전히 로드되면 링크를 훨씬 더 복잡한 것으로 변환합니다. 자, 이제 Google 지도^{(Google Maps)} 에 전달할 수 있는 정상적인 URL 이 있으므로 ^(URL)시작 주소^{(starting address)} 와 대상 주소^{(destination address)} 의 두 필드가 있는 간단한 양식을 만들어야 합니다 .

사람들이 주소를 입력하고 귀하의 장소로 가는 길을 찾도록 하려면 두 번째 필드가 숨겨져 있고 이미 목적지 주소^{(destination address)} 로 설정되어 있기를 원할 것 입니다.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”> Enter your starting address: <input type=”text” name=”saddr” /> <input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” /> <input type=”submit” value=”get directions” /> </form>

위의 코드를 확인하십시오. 첫 번째 줄은 양식을 시작하고 제출 버튼^{(submit button)} 을 클릭하면 데이터가 maps.google.com/maps로 보내져야 한다고 말합니다. target=blank 는 결과가 새 창에서 열리길 원한다는 의미입니다. 그런 다음 비어 있는 시작 주소^{(starting address)} 에 대한 텍스트 상자 가 있습니다.^{(text box)}

두 번째 텍스트 상자^{(text box)} 는 숨겨져 있고 값은 우리가 원하는 대상 주소 입니다. ^{(destination address)}마지막으로 "길찾기"라는 제목의 제출 버튼이 있습니다. 이제 누군가 주소를 입력하면 다음과 같이 표시됩니다.

몇 가지 추가 매개변수를 사용하여 방향을 맞춤설정하고 더 많은 지도를 작성할 수 있습니다. 예를 들어 기본 보기^{(default view)} 가 지도가 아니라 대신 위성^(Satellite) 이 되고 교통정보^(Traffic) 가 표시되기를 원한다고 가정해 보겠습니다 .

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

URL 의 layer=t 및 t=h 필드를 확인하십시오 . layer=t는 traffic layer and t=h means 하이브리드 맵을 의미합니다! t 는 노멀 맵의 경우 m , 위성  의 경우 k , 지형 의 경우 p 로 설정할 수도 있습니다 . z 는 확대/축소 수준^{(zoom level)} 이며 1에서 20까지 변경할 수 있습니다. 위의 URL 에서 7로 설정되어 있습니다. 최종 URL 에 이를 추가하기 ^(URL)만^(Just) 하면 사이트에 고도로 맞춤화된 Google 지도 길찾기 양식^{(Google Maps Get Directions form)} 이 생성됩니다. !

이것에 문제가 있는 경우 댓글을 게시해 주시면 도와드리겠습니다! 즐기다!

Add Google Maps Driving Directions to Your Website

Evеn though there are so many mapping apps and serνices out there to get you from point A to point B, the definitiνe king of maps is Goоgle Maps. I use іt on my comрuter, tablet and 90% of the time on my smartphone. It’s got the best data, the most navigation and routing options and cool features like Street View and walking, biking and mass transit info.

But what if you need to use a map or directions outside of Google’s website? Suppose you have your own wedding website or a personal blog and guests could visit your site, type in the address they will be coming from and automatically get directions to the event location!

Well, there are a couple of ways you can go about accomplishing this. The easiest way is to simply embed the map onto your webpage using the embed code generated by Google Maps. The second way is a bit more technical, but more customizable and dynamic. I’ll mention both methods below.

Embed Google Map

If you only want to display directions from one location to another, the easiest thing to do is to embed whatever map you are viewing using the embed code. First, go ahead and setup whatever directions you want in Google Maps and then click on the gear icon at the bottom right of the page.

Click on Share or embed map and then click on the Embed map tab. Here you can pick a size for your map and then copy the iframe code and drop that onto any webpage you like.

The only downside to this method is that the user just sees a static map. In the second method below, you can create a form whereby the user can type in any starting address and it will generate a map from that address to a destination address of your choosing.

Create Google Maps Form

To illustrate what I mean by the second method, go ahead and type a US address in the box below to get directions from your location to my house:

Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then just copying the URL from the address bar. You can also click on the tiny gear icon at the very bottom right of the page and choose Share or embed map.

The Share link tab will contain the URL, which is the same URL in your browser address bar. I ‘ve gone ahead and pasted the entire URL below just to show you what it looks like.

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

Yikes! That’s pretty long! There’s a lot of stuff in there, most of which doesn’t make any sense! Google Maps URL parameters used to be very straightforward and easy, but the new URL structure is quite complicated. Thankfully, you can still use the old parameters and Google will convert them into the new version automatically. To see what I mean, check out the link below.

http://maps.google.com/maps?saddr=start&daddr=end

Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:

http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”

It works! As you can see, though, Google Maps converts the links into something far more complicated once the map fully loads. Ok, so now that we have a sane URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.

If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>

Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.

The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:

You can customize the directions and map even more with a few extra parameters. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic.

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means hybrid map! t can also be set to m for normal map, k for satellite and p for terrain. z is the zoom level and you can change it from 1 to 20. In the above URL, it’s set to 7. Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site!

Have any issues with this, post a comment and I’ll try to help! Enjoy!

Related posts

• Google 지도가 말을 하지 않거나 음성 안내를 제공하지 않습니까? 수정하는 12가지 방법

• 9 Hidden Google Maps의 기능을 체크 아웃해야합니다

• Google Maps Search History를 보는 방법

• Google Maps에서 여러 Stops를 사용하는 방법

• 어떻게 Your Website에 Embed Google Forms에

• 7 Best Gmail Add-Ons

• 웹사이트 트래픽을 늘리기 위한 Google Analytics 사용자 조사 방법

• 안 그것은에 Chrome and How의 Software Reporter Tool은 무엇인가

• Google 시트에서 SUMIF을 사용하는 방법

• 데스크톱 및 모바일의 Google 지도에 핀을 고정하는 방법

• Google 시트에서 Filter 방법

• 8 Google Search Tips : 항상 무엇 당신을 위해있는 거 Looking 찾기

• 방법 Backup Google Chrome History

• YouTube History and Search Activity을 삭제하는 방법

• Google 지도 산불 추적을 사용하는 방법

• 사용 방법 Google Calendar : 10 Pro Tips

• Gmail에서 모든 이메일을 한 번에 삭제할 수 있습니까?

• Google Maps Plus 코드란 무엇이며 어떻게 사용합니까?

• Google 지도 위치 기록: Google 지도로 할 수 있는 5가지 유용한 작업

• Google Drive에서 Business Card를 만드는 방법