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 !
Top comments (0)