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




29 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
  19. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Private Detective Agency in Mumbai

    ReplyDelete
  20. I really enjoyed reading your blog, you have lots of great content. To make the documents secure digital signature and encryption is the best way. Please visit here:
    Digital Signature Certificate in Delhi

    ReplyDelete
  21. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    NEGIS BOUTIQUE HOME STAY

    ReplyDelete
  22. It is appropriate time to make some plans for the future and it's time to be happy. I've read this post and if I could I want to suggest you some interesting things or suggestions. Maybe you can write next articles referring to this article. I want to read even more things about it! most popular social media in singapore

    ReplyDelete
  23. It's time to create some future plans and it's time to be pleased. I read this post and I want to suggest some interesting stuff or suggestions to you if I could. You might be able to write articles about this article

    ReplyDelete
  24. So how do you give them that compelling reason? By treating this question as an opportunity for your sales pitch. By thinking about what it is that the interviewer wants in a candidate and what it is that they need to hear.

    if you want more just look here "positiverecruiter.com"

    ReplyDelete
  25. This sample answer addresses the company’s brand and history, but also demonstrates that the candidate took the time to do some additional research through his network (read on for some tips on how to research companies before you interview). The answer goes on to emphasize the candidate’s interest in working hard and developing on the job.

    if you want more just look here "resumetojobs.com"

    ReplyDelete
  26. If you work in an office, you will obviously meet lots of different types of people during your day to day duties. Whether you work on a small team in a small office, or a team in a big office with other companies, there will always be 10 types of people which can be found in every single office.

    if you want more just look here "laddaup.com"

    ReplyDelete

More Posts

FOLLOW