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)

Saturday, April 14, 2018

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 path between two marker points.important topic using Google Maps Directions API in our application.PHP has got you covered with over 80, that's right count them, functions to provide any type of operation.Really appreciate this wonderful post that you have provided for us.Great site and a great topic as well i really get amazed to read this.Its really good.V as share good stuff with good ideas and concepts. lots of great information and inspiration.I am impressed with your site’s blog keep sharing the useful post .

  2. is very fond of this article because it gives a lot of inspiration judi poker

  3. Great website this post gave me all useful information which I wanted to know I liked the collection and the way you described it. I value this post.
    Online Dresses Shopping UAE

  4. greate website this is very usefull for us Check Out

  5. Pretty good post. I recently came across your blog and wanted to express that I have really enjoyed reading your blog posts. In any manner I'm going to be subscribing to your feed and I hope you post again soon.
    search engine marketing agency

  6. I simply couldn't leave your website prior to suggesting that I really enjoyed the standard info a person supply for your visitors? Is gonna be back steadily in order to check out new posts. sem strategy


More Posts