HTML만으로 Google Maps 방향 구현 !
HTML 만 사용하여 내 웹 사이트에서 !!
작동 방식은 다음과 같습니다.
when you click on getdirection without adding value it opens external website/app of google maps and shows your position location that you have set value of the hidden input type which have the name daddr.
When you add some location in the placeholder and press get direction it shows ways like this :
index.html
<head>
<meta charset="UTF-8">
<title>Css tips</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<form action="http://maps.google.com/maps" class="map-get" method="get" target="_blank">
<div style="display: flex; align-items:
center;justify-content: center;">
<input style="margin-right: .2em; min-width:
20em;" class="input is-link is-rounded is-small" type="text" name="saddr" placeholder="where
you at now ?" />
<input type="hidden" name="daddr" value="Nees' Web
Service, Kathmandu 44600" />
<input type="submit" class="button is-link is-
rounded is-small" value="Get location" />
</div>
</form>
</body>
빠른 스타일링을 위해 bulma CSS를 사용하고 있습니다.
중앙 div 😂😂 잊지 마세요 :
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
그리고 이 구현으로 당신은 이 결과를 얻을 것입니다!
Thanks for Reading Do check my other posts !
Reference
이 문제에 관하여(HTML만으로 Google Maps 방향 구현 !), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/neeswebservices/google-maps-direction-implementation-with-just-html--9mc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
