Gmaps Direction

by Ajay Patel

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery gMap</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body>

<div id="map" class="map"></div>
    
<form action="" method="post">
    <input type="submit" name="directions" value="Show directions" id="gmaps_getdirections" />
    <input type="text" name="address" value="" id="gmaps_from" placeholder="Enter address/postcode" />
    <div id="gmaps_directions"></div>
</form>

</body>
</html>

CSS

#map{
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}

JavaScript

/**
 * jQuery gMap - Google Maps API V3
 *
 * @url        http://github.com/marioestrada/jQuery-gMap
 * @author    Cedric Kastner <[email protected]> and Mario Estrada <[email protected]>
 * @version    2.1
 */
(function($){

    $.fn.gMap = function(options, methods_options){
        
        // Optional methods
        switch(options){
        case 'addMarker':
            return $(this).trigger('gMap.addMarker', [methods_options.latitude, methods_options.longitude, methods_options.content, methods_options.icon, methods_options.popup]);
        case 'centerAt':
            return $(this).trigger('gMap.centerAt', [methods_options.latitude, methods_options.longitude, methods_options.zoom]);
        }
        
        // Build main options before element iteration
        opts = $.extend({}, $.fn.gMap.defaults, options);
        
        // Iterate through each element
        return this.each(function(){
            // Create map and set initial options
            var $gmap = new google.maps.Map(this);
            
            // Create new object to geocode addresses
            $geocoder = new google.maps.Geocoder();
            
            // Check for address to center on
            if (opts.address){ 
                // Get coordinates for given address and center the map
                $geocoder.geocode({
                        address: opts.address
                    }, function(gresult, status){
                        if(gresult && gresult.length)
                            $gmap.setCenter(gresult[0].geometry.location);
                    }
                );
            }else{
                // Check for coordinates to center on
                if (opts.latitude && opts.longitude){
                    // Center map to coordinates given by option
                    $gmap.setCenter(new google.maps.LatLng(opts.latitude, opts.longitude));
                }else{
                    // Check for a marker to center on (if no coordinates given)
           ...