Labels

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.

CSS

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

    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

Script


<script>

      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
        });

        flightPath.setMap(map);
      }
    </script>


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
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

Body


<body>
      <div id='map'>
</body>

 Result




20 comments:

  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 .

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
















    ReplyDelete
  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

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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  7. Each programmer can undestand how to work with databases with the help of special tutorials while no humanitarian can understand such tutorials. even the most intelligent humanitarian organizations - professional writers who work for the best sociology essay writing service https://proessaywritings.com/sociology-essay.html (it is the essay writing service that has rewards as "The best sociology essay writing service" and as "The best sociology paper writing company") cannot understand this type of tutorials.

    ReplyDelete
  8. Thank you very much for your valuable information. We are also deal in Digital Signature Certificate

    ReplyDelete
  9. Have you ever considered creating an ebook or guest authoring on other sites? I have a blog based upon on the same topics you discuss and would really like to have you share some stories/information. I know my audience would enjoy your work. If you are even remotely interested, feel free to send me an e mail.
    content marketing singapore

    ReplyDelete
  10. Thanks For Sharing This, Very Interesting And Helpful Support Provide By this blog, This was the first news blog. Digital Signature Certificate

    ReplyDelete
  11. Simply desire to say your article is as astonishing. The clarity in your post is just nice and i could assume you're an expert on this subject. Well with your permission allow me to grab your feed to keep up to date with forthcoming post. Thanks a million and please continue the rewarding work.
    VMSD

    ReplyDelete
  12. certainly like your web-site but you have to check the spelling on quite a few of your posts. Several of them are rife with spelling problems and I find it very bothersome to tell the truth nevertheless I’ll definitely come back again.
    notable online giants

    ReplyDelete
  13. I do consider all of the ideas you have introduced on your post. They are very convincing and will definitely work. Nonetheless, the posts are too short for novices. May you please lengthen them a little from next time? Thank you for the post.
    domain registration

    ReplyDelete
  14. Call now Toll Free +1-855-580-3482 Gmail Account Password Recovery Helpline Number to Gmail Password Recovery Gmail Password Reset Gmail Account Setup Gmail Account Hacked Gmail Account Locked Gmail Account Compromised Gmail Email Issues like Sending And Receiving Email Issues Call Gmail Helpline Number Gmail Customer Service Number Gmail Support Service Number Call Now Line Open 24x7 For all 365 days.

    ReplyDelete
  15. Thanks for the post I actually learned something from it. Very good content on this site Always looking forward to new post. Class 2 Digital Signature Certificate

    ReplyDelete
  16. You can approach our sans toll telephone number +1-855-580-3482 Gmail Password Recovery Phone Number and get some information about the help. Our specialized official will assist you with resolving your concern inside minutes.

    ReplyDelete
  17. Currently it sounds like Expression Engine is the preferred blogging platform out there right now. (from what I've read) Is that what you are using on your blog?
    Top Web Designers In Singapore

    ReplyDelete
  18. This is exactly what I was looking for. Thanks for sharing this great article. The quality of your articles and contents is great.
    Digital Signature Certificate in Delhi

    ReplyDelete

More Posts

FOLLOW