GoogleMaps route jQuery plugin

jQuery plugin for easily adding route map on your website

  • Share

To make it easier for your customers to find your store location it is really important to show them where you are, but what can make even better impact is to show them where you are based on their current location and to guide them to you.

GoogleMaps are a powerful tool for that, but you have to spend some time (more or less) to find code snippets and understand how to invoke their API, add the proper references, handle exceptions which might occur during the communication between your website and GoogleMaps API etc.

In order to cut this time spending I developed a lightweight plugin which lets you do this in a single line of code. The plugin has really simple usage and basically it just picks the current user coordinates and communicates with the GoogleMaps API to get the route drown on the map for you inside your website page.

        $(document).ready(function () {
            $(".map-container").GoogleRoute({
                destinationLat: 25.1971,
                destinationLng: 55.2741,
                width: "800px",
                height: "400px"
            });
        });
    

You can add class to div tag you will ue for a map or you can use any jQuery selector to pick single or multiple elements to add the route map.

Route calculating is done on map loading, so as soon as you initiate plugin on the selector route will be drown from your current location to the destination coordinates you added to plugin options.

Route Optimized

The plugin will handle not just only GoogleMap loading and route drawing, but it will load dynamically GoogleMap API JavaScript depending on whether it is already loaded on a page or not, so the only reference you need to add to your HTML are jQuery and plugin's .js and plugin's .css file.

Note

Initial version only enables simple route calculation and drawing. There are more features for the future releases to enable more options and features out of the box. Please refer to GitHub project page for more info and updates.

Checkout the demo on codepen.io http://codepen.io/dejanstojanovic/full/pgyYwd/

Code is available on GitHub https://github.com/dejanstojanovic/jQuery-GoogleRoute under the MIT license.

References

  • Share

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.

Comments for this article

comments powered by Disqus