DEV Community

Cover image for Google Maps direction Implementation with just HTML !
Neeschal Dahal
Neeschal Dahal

Posted on

Google Maps direction Implementation with just HTML !

I have implemented google maps get direction
in my website using just HTML !!

Here is how it works ?

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.

google image

When you add some location in the placeholder and press get direction it shows ways like this :

uploaded image

index.html

<head>
    <meta charset="UTF-8">
    <title>Css tips</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/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>
Enter fullscreen mode Exit fullscreen mode

I am using bulma CSS for fast styling.

don't forgot to center div 😂😂 :

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

And with this implementation you will get this result !

neeswebservices

Thanks for Reading Do check my other posts !

Discussion (0)