How to draw a path between two marker points?

In this tutorial, we’ll be learning about how to draws a route between two points. We’ll be using Google Maps Directions API in our application.

Create a new Google Map API Key from the API console using the steps demonstrated in this tutorial.


You can define map height and width under #map section 
Add this code in your head section of the html file

      #map {
        height: 100%;
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;



      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10, 
          center: {lat: 17.3483, lng: 78.3915}, //Default location to show on the map
          mapTypeId: 'terrain'

       //Two coordinates to draw a path
        var flightPlanCoordinates = [
          {lat: 17.4483, lng:  78.3915},
          {lat: 17.291, lng: 78.821}

        //Draw a simple Polyline
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2


Use your API key here, that you created in the google console.
If you are not created follow this link to create, it's a simple process.

     <script async defer


      <div id='map'>



  1. The content looks real with valid information. Good Work

  2. Great information. Couldn’t be written much better!
    Keep it up!
    Buy custom logo design



php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Popular Posts