• - -
  • Home
  • Asp.net
  • Jquery
  • Ajax
  • Sql Server
  • Social Api
  • Win Forms
  • Contact Us
  • Find waypoints between two cities using Google Map API

    HTML:

    <html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;key=AIzaSyDLFHOYXKUk9jYx06xHYDQxJwLrVmiMX2o"></script>
    </head>
    <body>

      <style>
      body {
      font-size: 0.8em;
      }

      #map-container, #side-container, #side-container li {
      float: left;
      }

      #map-container {
      width: 500px;
      height: 600px;
      }

      #side-container {
      border: 1px solid #bbb;
      margin-right: 5px;
      padding: 2px 4px;
      text-align: right;
      width: 260px;
      }

      #side-container ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      }

      #side-container li input {
      font-size: 0.85em;
      width: 210px;
      }

      #side-container .dir-label {
      font-weight: bold;
      padding-right: 3px;
      text-align: right;
      width: 40px;
      }

      #dir-container {
      height: 525px;
      overflow: auto;
      padding: 2px 4px 2px 0;
      }

      #dir-container table {
      font-size: 1em;
      width: 100%;
      }
      </style>

      <div id="side-container">
      <ul>
      <li class="dir-label">From:</li>
      <li><input id="from-input" type=text value="DLF Phase 2, Sector 25, Gurgaon, Haryana" /></li>
      <br clear="both" />
      <li class="dir-label">To:</li>
      <li><input id="to-input" type=text value="Connaught Place, New Delhi" /></li>
      </ul>
      <div>
      <select onchange="Demo.getDirections();" id="travel-mode-input">
      <option value="driving" selected="selected">By car</option>
      <option value="bicycling">Bicycling</option>
      <option value="walking">Walking</option>
      </select>
      <select onchange="Demo.getDirections();" id="unit-input">
      <option value="imperial" selected="selected">Imperial</option>
      <option value="metric">Metric</option>
      </select>
      <input onclick="Demo.getDirections();" type=button value="Go!" />
       </div>
      <div id="dir-container"></div>
      </div>
      <div id="map-container"></div>

      <script type="text/javascript">
      var Demo = {
      // HTML Nodes
      mapContainer: document.getElementById('map-container'),
      dirContainer: document.getElementById('dir-container'),
      fromInput: document.getElementById('from-input'),
      toInput: document.getElementById('to-input'),
      travelModeInput: document.getElementById('travel-mode-input'),
      unitInput: document.getElementById('unit-input'),

      // API Objects
      dirService: new google.maps.DirectionsService(),
      dirRenderer: new google.maps.DirectionsRenderer(),
      map: null,

       showDirections: function (dirResult, dirStatus) {
      if (dirStatus != google.maps.DirectionsStatus.OK) {
      alert('Directions failed: ' + dirStatus);
      return;
      }

      // Show directions
      Demo.dirRenderer.setMap(Demo.map);
      Demo.dirRenderer.setPanel(Demo.dirContainer);
      Demo.dirRenderer.setDirections(dirResult);
      },

      getSelectedTravelMode: function () {
      var value =
      Demo.travelModeInput.options[Demo.travelModeInput.selectedIndex].value;
      if (value == 'driving') {
      value = google.maps.DirectionsTravelMode.DRIVING;
      } else if (value == 'bicycling') {
      value = google.maps.DirectionsTravelMode.BICYCLING;
      } else if (value == 'walking') {
      value = google.maps.DirectionsTravelMode.WALKING;
      } else {
       alert('Unsupported travel mode.');
      }
      return value;
      },

      getSelectedUnitSystem: function () {
      return Demo.unitInput.options[Demo.unitInput.selectedIndex].value == 'metric' ?
       google.maps.DirectionsUnitSystem.METRIC :
      google.maps.DirectionsUnitSystem.IMPERIAL;
      },

      getDirections: function () {
      var fromStr = Demo.fromInput.value;
      var toStr = Demo.toInput.value;
      var dirRequest = {
      origin: fromStr,
      destination: toStr,
      travelMode: Demo.getSelectedTravelMode(),
      unitSystem: Demo.getSelectedUnitSystem(),
      provideRouteAlternatives: true
      };
      Demo.dirService.route(dirRequest, Demo.showDirections);
      },

      init: function () {
      var latLng = new google.maps.LatLng(37.77493, -122.419415);
      Demo.map = new google.maps.Map(Demo.mapContainer, {
      zoom: 13,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      // Show directions onload
      Demo.getDirections();
      }
      };

      // Onload handler to fire off the app.
      google.maps.event.addDomListener(window, 'load', Demo.init);
      </script>
    </body>
    </html>

    Demo :


    Category:  Jquery  ,JavaScript  

    Demo


Recent Post

  • SQL server insert multiple rows with one statement
  • QR code generator in asp.net
  • COVID-19 Live updates of the world through api
  • Using Canvas to save Signatures as image using jQuery
  • Geo Location Demo using IP Address in jQuery
  • AJAX UpdateProgress in ModalPopupExtender in ASP.Net
  • Find waypoints between two cities using Google Map API
  • Remove Last Comma from String in jQuery
  • How we Create fibonacci series In sql server
  • How To Escape % Sign From Like Command in SQL Server
  • Add/Remove Items from One CheckBoxList to other using C#
  • Change textbox background color after focus in jquery in Html or Asp.net page
  • Display Image preview before upload in Asp.net or HTML and Jquery
  • Maintain scroll postion on Div after postbach in asp.net
  • Asp.Net Dynamically Change (Add) Meta Tags or Page Title & Description in C#
AspdotnetCode

Tags

Asp.Net

Jquery

Json

JavaScript

Tricks

Tips

RadioButtonList

ListBox

Polymorphism

CheckBoxList

LightBoxEffect

DataGridview

YouTube

web.config

Progressbar

Google MAPS

AutoComplete

Windows

News

Article

Error

SqlServer

Plugins Errors

AjaxAsyncFileUpload

validations

Twitter

Windows Service

DatePicker

ExportGridviewData

Statistics

Header on Scroll

Accordion Menu

Global.asax

ToolTip

Modalpopup

  • Home
  • |
  • About Us
  • |
  • Contact Us
Visitor Counter