Well,after having worked out a lot and looking here and there this is how i made it using Google MAPS API v3 : 1.First,you need to initialize your map which should be centered at the input coordinates.
function initialize()
{
var lat=parseFloat(document.getElementById("Lat").value);
var lng=parseFloat(document.getElementById("Long").value);
map = new google.maps.Map(document.getElementById('map-canvas'),
{
center: new google.maps.LatLng(lat,lng),
zoom: 15,
styles: [
{
stylers: [
{ visibility: 'on' }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'on' }
]
}
]
});
document.getElementById("map-canvas").style.borderColor="aquamarine ";
document.getElementById("help").innerHTML="<u>HELP</u><br> Click on a Place to find out the direction & distance.<br>";
/*The following creates a marker in the provided Coordiantes
using a DROP animation. Clicking on the marker will toggle
the animation between a BOUNCE animation and no animation.*/
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
animation: google.maps.Animation.DROP,
title:"You're Here!"
});
google.maps.event.addListener(marker,'click', toggleBounce);
infoWindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
}
And so on and so forth using the directions API and the MAP API i have created a very basic map which is good for any beginner. https://drive.google.com/file/d/0B5NwjTjzPp9lV18zWGNMenF1Q0k/edit?usp=sharing