HTML만으로 Google Maps 방향 구현 !

2613 단어 html
Google지도를 구현하여 방향을 잡았습니다.
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 !

110. 균형 이진 트리 🚀
JavaScript - for...of 및 for...in

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage