Google Maps Drag Markers For Directions


Drag directions and click the map to geocode.
<!DOCTYPE html>
  <meta charset="utf-8">
  <title>Google Maps Drag Markers For Directions</title>
  <script type="text/javascript" src=""></script>
 <style type="text/css">
  html, body {
  color: #585858;
  font-family: sans-serif;
  height: 96%;
  margin: 2%;
  padding: 2%;
 #map_div {
  height: 100%;
  #map_canvas {
  height: 80%;
  width: 70%;
  margin: 10px;
  box-shadow: 1px 1px 4px 2px rgba(0,0,0 ,0.7);
  float: left;
  float: right;
  width: 25%;
  height: 80%;
  overflow: auto;
  visibility: hidden;
  display: none
  visibility: visible,
  display: block
 <script type="text/javascript">
  var map;
  var infowindow;
  var directionsService;
  var directionsDisplay;
  var geocoder;
  var infoWindow;
  var marker;
 function mapsLoaded() {
  directionsService = new google.maps.DirectionsService();
  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow();
  var torun = new google.maps.LatLng(53.01357, 18.597665);
  map = new google.maps.Map(document.getElementById('map_canvas'), {
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: torun,
  zoom: 5
  google.maps.event.addListener(map, 'click', function(e) {
  {'latLng': e.latLng},
  function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
  if (results[0]) {
  if (marker) {
  } else {
  marker = new google.maps.Marker({
  position: e.latLng,
  map: map});
  infowindow.setContent(results[0].formatted_address);, marker);
  } else {
  document.getElementById('geocoding').innerHTML =
  'No results found';
  } else {
  document.getElementById('geocoding').innerHTML =
  'Geocoder failed due to: ' + status;
 function showDirections() {
  directionsDisplay = new google.maps.DirectionsRenderer({
  map: map,
  preserveViewport: true,
  draggable: true
  var sampleRequest = {
  origin: 'Stoke on Trent, UK',
  destination: 'Budapest, Hungary',
  travelMode: google.maps.TravelMode.DRIVING,
  unitSystem: google.maps.UnitSystem.METRIC
  directionsService.route(sampleRequest, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
 function loadMap(langCode) {
  google.load('maps', '3.7', {
  'other_params' :
  'callback' : mapsLoaded
 var langCode = 'en-GB';
  <div id="map_canvas"></div>
  <div id="textbox">
  Drag directions and click the map to geocode.<br>
  <div id="geocoding"> </div>
  <div id="directions"> </div>

Available For Freelance:

I Am Available To Work For You Freelance, See My Skills To See If I Can Help Your Project, If I Can Help You Then Please Contact Me.

My Rates Start From £180 A Day, Discount Prices For Regular Clients And Work Over 3 Days.

I Started To Learn Web Development In 2008, I Did A Few Open University Courses While Working Full Time In The Building Trade, I Managed To Get A Diploma With Distinction

Request A Tutorial

If You Are Having Difficulty With The Development Of Your Website Or If You Are Just Starting Out Leaning Web Development And You Think I Can Help You Then Request A Tutorial, I Will Do My Best To Help You

I Dont Charge For My Services If I Can Help You With Something That Can Be Be Fixed In A Few Minutes.


If You Would Like To Advertise On This Site Then Please Contact Me, You Will Be Given Login Details To See What Day And Where Clicks Have Come From.

Prices Start From £10 A Month With Discounts Available For 3 Months Or More.

You Can Either Send Me The Banner Advert That You Have Designed Or From £10 I Can Have Designer Design A Banner For You.

Please Leave A Comment And A Rating


Chris Gave This Code Rating

Google Maps Drag the 2 markers to get directions, hope it helps


Ayanna Defilippo Gave This Code Rating

This is good site to watch.Thanks for shareing the posts. image 5.00 out of 5 based on 2 ratings. 2 user reviews.

My Skills:

  • PHP 5
  • JavaScript
  • Jquery
  • XHTML Validation
  • KineticJS
  • HTML5
  • CSS - CSS3
  • SEO

My Social Networks:

  • facebook youtube