Find distance b/w places

Now we have come to an interesting part , Do you need to find the distance between any two places aroud the world , it's achieved using jQuery maps3 plugin . This is achieved by using the action 'getDistance' and the travel model used here 'google.maps.TravelMode.DRIVING'. Now enjoy calculating the distance between your fav places around the world .

If no Results are found we display a message 'No route could be found between the origin and destination'

If the Source and the destion could not be identified then we display a message 'The origin and/or destination of this pairing could not be geocoded'

<html>

<head>

<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<script type="text/javascript" src="../gmap3.js"></script>

<style>

.gmap3 {

  margin: 20px auto;

  border: 1px dashed #C0C0C0;

  width: 1024px;

  height: 768px;

}

</style>

<script type="text/javascript">

function distance(){

  $('body').gmap3({

    action:'getDistance',

    options:{

      origins:[$('#origins').val()],

      destinations:[$('#destinations').val()],

      travelMode: google.maps.TravelMode.DRIVING

    },

    callback: function(results){

      var html = '';

      if (results){

        for (var i = 0; i < results.rows.length; i++){

          var elements = results.rows[i].elements;

          for(var j=0; j<elements.length; j++){

            switch(elements[j].status){

              case google.maps.DistanceMatrixStatus.OK:

                html += elements[j].distance.text + ' (' + elements[j].duration.text + ')<br />';

                break;

              case google.maps.DistanceMatrixStatus.NOT_FOUND:

                html += 'The origin and/or destination of this pairing could not be geocoded<br />';

                break;

              case google.maps.DistanceMatrixStatus.ZERO_RESULTS:

                html += 'No route could be found between the origin and destination.<br />';

                break;

            }

          }

        }

      } else {

        html = 'error';

      }

      $('#results').html( html );

    }

  });

}

</script>

</head>

<body>

Origin :

<input type="text" id="origins" />

Destination :

<input type="text" id="destinations" />

<input type="button" id="distance" value="distance" onclick="distance();">

<br />

<br />

Results :

<div id="results"></div>

</body>

</html>

Adding Markers using selectors

jQuery Google Maps : Adding Markers using selectors

jQuery with Google Maps has become pretty easier after the invention of gmaps3 plugin .

This post helps in adding markers inside maps using some jQuery selectors.

All the three maps are invoked through the class selector "gmap3" while the markers in the second map is invoked through "#test2" id selector & first map again through ".gmap3.top" class selector.

<html>

<head>

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<script type="text/javascript" src="gmap3.js"></script>

<style>

.gmap3 {

  margin: 20px auto;

  border: 1px dashed #C0C0C0;

  width: 500px;

  height: 250px;

}

</style>

<script type="text/javascript">

  $(function() {

    $('.gmap3').gmap3( {

      action : 'init',

      options : {

        center : [ 22.49156846196823, 89.75802349999992 ],

        zoom : 2,

        mapTypeId : google.maps.MapTypeId.SATELLITE,

        mapTypeControl : true,

        mapTypeControlOptions : {

          style : google.maps.MapTypeControlStyle.DROPDOWN_MENU

        },

        navigationControl : true,

        scrollwheel : true,

        streetViewControl : true

      },

      events : {

        rightclick : function(map, event) {

          $(this).gmap3( {

            action : 'addMarker',

            latLng : event.latLng

          });

        }

      }

    });

    $('#test2').gmap3( {

      action : 'addMarker',

      latLng : [ 29.132318972825445, 81.32052349999992 ]

    });

    $('.gmap3.top').gmap3( {

      action : 'addMarker',

      latLng : [ 29.132318972825445, 81.32052349999992 ]

    });

  });

</script>

</head>

<body>

<div id="test1" class="gmap3 top"></div>

<div id="test2" class="gmap3 middle"></div>

<div id="test3" class="gmap3 bottom"></div>

</body>

</html>