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.

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/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>

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;
}

And with this implementation you will get this result !

Thanks for Reading Do check my other posts !

Blog

Google Maps direction Implementation with just HTML !

Nischal Dahal

Here is how it works ?

And with this implementation you will get this result !

Join Our Newsletter. No Spam, Only the good stuff.

Related