Skip to content

All topics  /  jQuery

Jquery City Dropdown To Google Map Show Route Example

jQuery ·

When “Jquery City Dropdown To Google Map Show Route Example” moves through design, development and browser testing, this delivery reference can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys,

Today,I will learn you how to create dropdown selected City show google map route. we will show example jquery city dropdown to google map show route.you can easy create jquery city dropdown to google map show route.

Here, I will give you full example for simply display City Dropdown To Google Map Show Route using jquery as bellow.

Example


<html>
<head>
<title>Jquery City Dropdown To Google Map Show Route Example</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&&callback=initMap&libraries=&v=weekly" defer></script>
<style type="text/css">
  /* Optional: Makes the sample page fill the window. */
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: "Roboto", "sans-serif";
    line-height: 30px;
    padding-left: 10px;
  }
  #map{
    width: 100%;
    height: 500px;
    margin-top: 100px;
  }
  </style>
</head>
<body>
  <div id="floating-panel">
    <b>Start: </b>
    <select id="start">
      <option value="rajkot">Rajkot</option>
      <option value="nashik">Nashik</option>
      <option value="indore">Indore</option>
      <option value="vadodara">Vadodara</option>
    </select>
    <b>End: </b>
    <select id="end">
      <option value="rajkot">Rajkot</option>
      <option value="nashik">Nashik</option>
      <option value="indore">Indore</option>
      <option value="vadodara">Vadodara</option>
    </select>
  </div>
  <div id="map"></div>
</body>
 <script>
  function initMap() {
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 7,
      center: { lat: 20.00, lng: 77.00 },
    });
    directionsRenderer.setMap(map);
    const onChangeHandler = function () {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    };
    document
    .getElementById("start")
    .addEventListener("change", onChangeHandler);
    document
    .getElementById("end")
    .addEventListener("change", onChangeHandler);
  }
  function calculateAndDisplayRoute(directionsService, directionsRenderer) {
    directionsService.route(
    {
      origin: {
        query: document.getElementById("start").value,
      },
      destination: {
        query: document.getElementById("end").value,
      },
      travelMode: google.maps.TravelMode.DRIVING,
    },
    (response, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
      } else {
        window.alert("Directions request failed due to " + status);
      }
    }
    );
  }
  </script>
</html>

It will help you....

More on this topic