How to Build a Distance Finder with Google Maps API

Posted in Tutorials • Posted on 72 Comments

Google maps is a free web mapping service application provided by Google. It offers lots of cool features (showing various map types, plotting points, showing routes, geocoding addresses). You can also add all these features to your website using the Google Maps APIs provided by Google. In this tutorial I will show you how to add some of these features to your site. I will be using the Google Maps Javascript API v3 (the newest version).

What are we going to build?

We’ll make a distance finder. We’ll add a Google map to our site, plot two points on it (the user will be able to choose the addresses for these points), compute the distance between them and show the quickest route between them.

You can see the demo of application here. Also, you can download the source code using this link.

Prerequisites

The first thing you need to do in order to use the API from Google is requesting an API key. You can do this here. It’s easy and free!

Creating the web form for getting the two addresses

We’ll create a simple html form for the user to write the two addresses. We’ll add two input boxes and a button to the form. When the user presses the “Show” button, the map with the two locations will be shown.

Here’s the code for this:

<table align="center" valign="center">
<tr>
   <td colspan="7" align="center"><b>Find the distance between two locations</b></td>
</tr>
<tr>
   &nbsp;
</tr>
<tr>
   <td>First address:</td>
   &nbsp;
   <input name="<span class=" type="text" />address1" id="address1" size="50"/>
   &nbsp;
   <td>Second address:</td>
   &nbsp;
   <input name="<span class=" type="text" />address2" id="address2" size="50"/>
</tr>
<tr>
   &nbsp;
</tr>
<tr>
   <td colspan="7" align="center"><input type="button" value="Show" onclick="initialize();"/></td>
</tr>
</table>

The ‘initialize’ JavaScript function will be called when pressing the button. The function will show the map. In the next section I’ll show you how.

We also need to add a div tag to our page, where the map will be shown:

<div id="map_canvas" style="width:70%; height:54%"></div>

We will also need two div tags for showing the distances we will compute:

<div style="width:100%; height:10%" id="distance_direct"></div>
<div style="width:100%; height:10%" id="distance_road"></div>

Showing the map

The first thing we need to do is to find the coordinates (latitude and longitude) for the two addresses. Luckily, Google Maps will help us! Here’s what we have to do:

We’ll use the geocoder object for this. First, we’ll have to create a new geocoder object.

geocoder = new google.maps.Geocoder();

After this, we’ll get the two address values from the form. Like this:

address1 = document.getElementById("address1").value;
address2 = document.getElementById("address2").value;

Then, we’ll use the following code to call the geocode method on the geocoder object. We’ll pass it the addresses one by one and save the results in the variables called location1 and location2 (these will hold the coordinates of the two addresses).

if (geocoder)
{
   geocoder.geocode( { 'address': address1}, function(results, status)
   {
      if (status == google.maps.GeocoderStatus.OK)
      {
         //location of first address (latitude + longitude)
         location1 = results[0].geometry.location;
      } else
      {
         alert("Geocode was not successful for the following reason: " + status);
      }
   });
   geocoder.geocode( { 'address': address2}, function(results, status)
   {
      if (status == google.maps.GeocoderStatus.OK)
      {
         //location of second address (latitude + longitude)
         location2 = results[0].geometry.location;
         // calling the showMap() function to create and show the map
         showMap();
      } else
      {
        alert("Geocode was not successful for the following reason: " + status);
      }
   });
}

You will notice that we’ve called the showMap() function when the coordinates for the second address are retrieved. This function will set the options for the map and show it.

We’ll now compute the coordinates for the center of the map. The center point will be between our two points.

latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

Next, we’ll show the map. We have to create a new map object and pass it some parameters (set using the mapOptions variable): the zoom level, the center and the type of the map.

var mapOptions =
{
   zoom: 1,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.HYBRID
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

The next thing we’ll do is to show the quickest route between our locations. We’ll use a DirectionsService object from google maps for this. Here’s how the code looks:

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
   suppressMarkers: true,
   suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
   origin:location1,
   destination:location2,
   travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
   if (status == google.maps.DirectionsStatus.OK)
   {
      directionsDisplay.setDirections(response);
      distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
      distance += "The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
      document.getElementById("distance_road").innerHTML = distance;
   }
});

We’ve first created the objects we need. We then set some options for displaying the route, we’ve chosen not to show markers and info boxes (we’ll create our own ones);

suppressMarkers: true,
suppressInfoWindows: true

We’ve created a request object and set the origin and destination for the route and also the travel mode:

var request = {
   origin:location1,
   destination:location2,
   travelMode: google.maps.DirectionsTravelMode.DRIVING
};

We’ve then called the route function and obtained a response from the server. Using this response we’ve plotted the route on the map and written some info (the total distance and aproximative driving time) in one of the divs we’ve created:

directionsDisplay.setDirections(response);
distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
distance += "The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;

We’ll also show a line between our points and compute the distance between them (the distance on a straight line, in kilometers). To show a line we’ll use a Polyline object from google maps and set some options for it (the map it belongs to, the path, the width, the opacity and the color):

var line = new google.maps.Polyline({
   map: map,
   path: [location1, location2],
   strokeWeight: 7,
   strokeOpacity: 0.8,
   strokeColor: "#FFAA00"
});

We’ll now compute the distance between two points using their coordinates and show the result inside the other div tag we’ve created.

var R = 6371;
var dLat = toRad(location2.lat()-location1.lat());
var dLon = toRad(location2.lng()-location1.lng());
var dLat1 = toRad(location1.lat());
var dLat2 = toRad(location2.lat());
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(dLat1) * Math.cos(dLat1) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;

document.getElementById("distance_direct").innerHTML = "The distance between the two points (in a straight line) is: "+d;

The last thing we’ll do is show a marker and an info window for each location. We’ll create two marker objects (the options we’ll set are: the map it belongs to, the coordinates and a title):

var marker1 = new google.maps.Marker({
   map: map,
   position: location1,
   title: "First location"
});

var marker2 = new google.maps.Marker({
   map: map,
   position: location2,
   title: "Second location"
});

Next, we’ll create variables to hold the texts to print in the info windows, create two info window objects (we’ll add the texts to them using the content option) and we’ll add two event listeners which will show the appropriate info window when the user clicks on the markers:

// create the text to be shown in the infowindows

var text1 = '
<div id="content">'+</div>
  '<h1 id="firstHeading">First location'+
  '<div id="bodyContent">'+
  '<p>Coordinates: '+location1+'</p>'+
  '<p>Address: '+address1+'</p>'+
  '</div>'+
  '</div>';

var text2 = '
<div id="content">'+</div>
  '<h1 id="firstHeading">Second location'+
  '<div id="bodyContent">'+
  '<p>Coordinates: '+location2+'</p>'+
  '<p>Address: '+address2+'</p>'+
  '</div>'+
  '</div>';

// create info boxes for the two markers
var infowindow1 = new google.maps.InfoWindow({
   content: text1
});
var infowindow2 = new google.maps.InfoWindow({
   content: text2
});

// add action events so the info windows will be shown when the marker is clicked
google.maps.event.addListener(marker1, 'click', function() {
   infowindow1.open(map,marker1);
});

google.maps.event.addListener(marker2, 'click', function() {
   infowindow2.open(map,marker2);
});

And we’re done! We now have a distance finder! Let me know if you have any questions!

7 Written ArticlesWebsite

Irina is a software developer from Bucharest, Romania. She enjoys working on various programming projects. She likes spending her spare time reading, hiking, travelling, skating or playing tennis. She also blogs a bit. You can find her online in her home on the internet and on twitter.

72 Comments Best Comments First
  • Bojan

    Tuesday, June 29th, 2010 12:18

    5

    Hi!
    Very nice article, a small digression, you don’t need an API key if you’re using Googla Maps API v3. (You also didn’t use an API key in example provided with post.)
    Regards

    +1
  • hackxue

    Monday, July 5th, 2010 08:01

    25

    Irina,Good work!
    I wanna to know if it could show the bus line!?

    0
  • shafi

    Sunday, July 4th, 2010 18:33

    24

    Hi!
    Yep, Nice article, helped me alot.

    Thanks.

    0
    • Irina

      Monday, July 5th, 2010 11:40

      26

      I’m glad you liked it!

      0
  • Omer Rosenbaum

    Wednesday, June 30th, 2010 14:15

    21

    Hi Irina!
    Great stuff you made there. I want to continue developing it and combine it with MySql.
    What I am trying to do is to get the 2 addresses into a DB. So far I haven’t had much success. Could you or anyone else can try to prepare such thing?

    0
    • Irina

      Wednesday, June 30th, 2010 14:31

      20

      That’s a good idea! I am probably going to write another tutorial on google maps and I could also add this to it.

      In the meantime, if you need some help with what you’ve tried so far, send me a message or something and I could help you.

      0
  • daniele

    Thursday, July 1st, 2010 22:58

    22

    i had to do this time ago for a website.
    don’t store the address, but use the lat and the long instead

    first of all i looped a php page that reads the addresses from the db, find lat and long via google geolocation and then store it into the db. starting from this moment you can always geolocate the point in the google maps reading its coordinates

    0
    • Irina

      Friday, July 2nd, 2010 12:16

      23

      That’s a good idea!

      0
  • niks

    Tuesday, July 6th, 2010 10:48

    28

    Hey. Great tutorial. I have always used google maps. Its interesting to see that there is lot more to it.

    0
  • shaun

    Wednesday, September 15th, 2010 15:06

    34

    very nice thanks but how do i output distance in miles and not km ? is it possible

    0
    • Irina

      Thursday, September 16th, 2010 11:53

      36

      You would just have to compute the return values from gmaps from kms to miles :)

      0
  • Ryan

    Monday, September 13th, 2010 15:05

    32

    Hi Irina

    What an awesome tutorial thank you. Pehaps you can point me in the right direction:

    When a user starts typing in an address i would like it to automatically dropdown a suggested list of addresses. The same as it works for google map directions.

    If you can point me in the right direction It would be greatly appreciated.

    thanks
    Ryan

    0
    • Irina Borozan

      Wednesday, September 15th, 2010 09:40

      35

      Hello

      You would need to use some code for that auto-complete. There are loads of libraries (in javascript, jquery) available. Here’s an example:

      The library you choose to use depends on the programming language your app is written in and on the location of the data you want to show in the drop down.

      I hope this helps!

      0
  • leonid

    Friday, July 9th, 2010 11:19

    29

    it`s great lesson!
    thanks.

    0
  • bago

    Sunday, July 11th, 2010 13:50

    30

    very nice and very usable!!!
    a little hint: why don’t u convert the distance in a more useful way? i.e. in km

    0
  • Ryan

    Monday, September 13th, 2010 19:37

    31

    Hi Irina

    Do you know how i can get the google formatted address? Basically take the address entered and get the address back from google formatted correctly?

    Thanks in advance
    Ryan

    0
    • Irina Borozan

      Wednesday, September 15th, 2010 09:42

      33

      Hello

      That’s a really good idea! I haven’t thought of doing this before, but I will definitely look into it. I don’t know if there are any converters available though. You might need to write your own.

      I’ll let you know if I find anything useful!

      0
  • Irina

    Wednesday, June 30th, 2010 14:28

    19

    Thank you all for the tips and ideas! I might be adding some to my next google maps tutorial :)

    0
  • Pierre

    Tuesday, June 29th, 2010 12:24

    1

    Nice tut! Thanks.
    I saw a website using Google Maps like your tutorial, providing this kind of tool: http://distancity.com

    0
  • Andrea

    Tuesday, June 29th, 2010 14:27

    8

    Very interesting, You should complete it adding driving directions!

    0
    • Saad Bassi

      Tuesday, June 29th, 2010 16:46

      11

      Stay Tuned for the 2nd part coming on Thursday.:)

      0
  • Matt

    Tuesday, June 29th, 2010 20:14

    7

    Nice tutorial! One question: why do you set the zoom level at 1? Wouldn’t it be better to make the zoom level high enough to show just the area with the two points defined by the user?

    0
    • Irina Borozan

      Tuesday, June 29th, 2010 21:47

      10

      I’ve left it at 1 because if google can find a route between the two addresses, it automatically adjusts the zoom level when showing the route.

      0
      • Matt

        Wednesday, June 30th, 2010 05:41

        16

        Ah, excellent. Thanks!

        0
  • Frank Bailey

    Tuesday, June 29th, 2010 19:39

    6

    Hi Irina, this is a great tutorial, thanks a ton! I’d just like to know if you might be able to provide a quick example of how we might be able to allow the user to click a point on the map to use as either the destination or origin, rather than entering and then geocoding the address?

    0
    • Irina Borozan

      Tuesday, June 29th, 2010 21:45

      9

      Hey, good idea! You’ll see something similar to this in the second part of the tutorial, which will be posted in a couple of days ;) I’m glad you enjoyed this one!

      0
  • George Chatzimanolis

    Tuesday, June 29th, 2010 12:25

    2

    THANKS!!! It is an excellent tutorial.

    0
  • aditya

    Tuesday, June 29th, 2010 16:28

    3

    this is very nice post

    0
  • Irina

    Tuesday, June 29th, 2010 16:58

    4

    Thanks for all the comments and tips! I’m glad you like it :)

    0
  • Shawn McConnell

    Wednesday, June 30th, 2010 05:25

    15

    Irina, nice tutorial I have done something similar on my site but I just outline the locations of where I have previously worked on my resume page. this helps potential people see the general area I work in.

    Shawn,

    0
    • Irina

      Wednesday, June 30th, 2010 14:26

      18

      Thats a good idea of using google maps! :)

      0
  • Irina

    Tuesday, June 29th, 2010 22:57

    12

    I’ve just found out google maps turns 5 today! Nice coincidence!

    They’ve made a map with applications made by users and I’ve added mine there :)

    0
  • Saad Bassi

    Tuesday, June 29th, 2010 18:32

    13

    Really awesome Tut Irina. Thumbs up. :)

    0
  • emil

    Wednesday, June 30th, 2010 01:10

    14

    Multumesc pentru tutorial. Daca se poate traseu si cu ruta din 1, 2 puncte de trecere.
    Emil

    0
    • Irina

      Wednesday, June 30th, 2010 14:24

      17

      Bună idee :)

      It’s not very difficult to add more points on a route as you said, you just have to multiply to code for the textboxes and markers :)

      0
  • Abdullasoudi

    Thursday, October 28th, 2010 14:01

    37

    Great !! Thanks to you…

    0
  • akkis

    Saturday, November 5th, 2011 13:47

    62

    This is really a GREAT tutorial! Thank you very much Irina!

    0
  • Bhavit

    Thursday, November 10th, 2011 06:16

    63

    Hi,
    Thanks a lot for detailed tutorial. I was wondering If we can add hundreds of addresses or load result from excel/google spreadsheet (colum A is source and Column B is destination). It will be much appreciated if you can propose any solution.
    Thanks

    0
  • sushma

    Friday, November 4th, 2011 14:43

    61

    Hi,
    Very nice article, is there any usage limit that apply per month/per day.

    0
  • Lina

    Friday, November 4th, 2011 11:24

    60

    Hi, Thanks for your detailed explanation. I think you can help me. I am trying to draw a path based on a set of geo coordinates on my own map(not google maps) but I do not know how to create the path. Does google maps API support a function in which the returning result is a path(probably a set of lines)?

    0
  • Ankit

    Monday, September 26th, 2011 18:34

    57

    I am trying to convert it into Miles but :( not getting any success plz anyone can help me out………

    0
  • heru

    Tuesday, October 18th, 2011 19:45

    58

    it’s cool, thanks a lot

    0
  • cham2748

    Sunday, October 30th, 2011 15:01

    59

    i want to do same in visual basic application..please help me..i almost done with my app,but i cant do the exact thing in vb form..(im using vb 6) your help highly appreciated,thank you.

    0
  • Mr. Can

    Friday, December 16th, 2011 03:34

    64

    thanks very very much Irina Borozan, application is perfect. hehe

    0
  • Ajith

    Monday, January 16th, 2012 07:31

    65

    Very innovative, great article. Cheeers :)

    0
  • Sami

    Monday, March 5th, 2012 07:19

    71

    Excellent, fabulous, Marvelous, Brilliant work
    So Easy, So Clear

    0
  • rase

    Wednesday, March 7th, 2012 13:18

    72

    Excellent, fabulous..

    0
  • Alex

    Sunday, February 26th, 2012 20:17

    70

    A great tool and tutorial, but where do I put my google API key? I don’t want to use up your quota!
    many thanks.

    0
  • Alex

    Sunday, February 26th, 2012 20:15

    69

    Hi, this is a great tutorial and tool, but was wondering where do I put my google API key? I don’t want to use up your quota! :)

    0
  • Shamal

    Sunday, January 22nd, 2012 02:15

    66

    The best tutorial ever.. Thank you so much for this. :)

    0
  • Kangtp

    Thursday, January 26th, 2012 09:28

    67

    Hi, your tutorial is excellent but may i know how do i calculate the distance for 5 markers ??

    0
  • Hamed

    Friday, February 10th, 2012 22:30

    68

    good job
    it is my question too”Hi, your tutorial is excellent but may i know how do i calculate the distance for 5 markers ??”

    thanks for sharing

    0
  • ratheepan s

    Tuesday, August 30th, 2011 12:41

    56

    Hi, greaet work.

    How can we Build a Distance Finder with Google Maps API between two zipcodes.

    0
  • maddy

    Sunday, March 27th, 2011 15:34

    43

    superbbbbbbbb….. thanxs alot…. really best….

    0
  • Kalpesh

    Tuesday, March 8th, 2011 12:24

    42

    First Thanks a lot for such a superb helpful stuff.
    now here I need something more,
    like:”I want to offer the choose the way from Suggested routes(not by default shortest one)”.
    so its possible,please if it possible help me,
    thanks in advance….

    Thanks & Regards,
    Kalpesh

    0
  • Barto

    Thursday, February 17th, 2011 20:11

    41

    Hello. I was playing on your aplication and I found a small error. When You click show the aplication displays the map properly. But when You do it again (doesn’t matter if you change the location) map shows whole world and the javascript error occurs. I was trying to fix it. If you change the default zoom parameter from 1 to 2 it works perfect. I don’t know why exacly but it does.

    Thanks alot for this tutorial. It was very helpful for me.

    0
    • Irina

      Thursday, May 5th, 2011 10:40

      45

      I’m glad you liked it! I will check out the error you mentioned.

      0
  • pove

    Monday, December 20th, 2010 15:20

    38

    Great tuto! Thanks! For Spanish people, try to find the rou from “Vete” to “Cagar”, it exists!

    ;-)

    0
  • Saransh

    Saturday, February 12th, 2011 08:16

    39

    Awesome tut….very helpful in daily life…also very innovative….

    0
  • Raw Hasan

    Thursday, February 17th, 2011 17:18

    40

    Hi Irina,

    Thanx a million for writing such an wonderful Google map tutorial! It is very good and well explained tutorial. Looking forward to read the second part. :)

    One thing I just can’t understand. Where to use the KEY which Google gives in the sign-up page? (I’m just a starter! :) )

    0
    • Irina

      Thursday, May 5th, 2011 10:42

      46

      I’m glad you liked it! Google maps api v3 doesn’t require an api key anymore :)

      0
  • Bob

    Sunday, August 21st, 2011 04:07

    52

    Very nice, thanks for all the hard work. One question though. The “straight line distance” is always greater than the “chosen route” which seems to agree with Google Maps. How can the straight line distance be greater than a route that must follow roads and streets?

    0
  • Ch

    Friday, August 12th, 2011 09:03

    51

    Great tutorial. Keep the good work up.

    0
  • Liaqat Ali

    Wednesday, August 3rd, 2011 07:25

    50

    Hello,
    nice tutorial, and i implement it very easily in my site.
    I want 1 thing more, the distance between the cities are showing in English How can I show the distance in other languages. i need Portuguese Language.
    thanks in advace

    0
  • Steve

    Friday, June 10th, 2011 13:36

    47

    Hi Irina,

    Great document very helpful for me and my project but i have a question:

    Is it possible to work out the distance im miles rather than KM?
    Is it possible to work out the round distance ie there and back? i am creating a mileage tracking system that would track the distance for the full journey.

    0
  • Dave

    Wednesday, July 13th, 2011 16:18

    48

    Great tutorial thank you very much, I was wondering if there was a way of adding the fuel cost into it? Cant seem to find anything on the api!

    0
    • Irina

      Wednesday, August 24th, 2011 09:07

      53

      Hi

      There’s nothing like that in the api, but you could add something. You get the distance from the api, use a variable for the fuel cost and compute the result :)

      0
  • Shaheryar

    Wednesday, July 20th, 2011 20:32

    49

    hiya,

    I would say its wonderful tutorial I have came across, I was just wondering if you can give an idea how can I create random markers between start and end location. lets say start and end location is same and I want to put three way points randomly in such a way that I can control the duration of distance between start and end point. like if way points are placed randomly and I ckeck if distance is greater than 1 hour then reduce distance to one hour.

    I would really appreciate if you can propose a solution

    0
    • Irina

      Wednesday, August 24th, 2011 09:09

      54

      Hi

      Yes, this could be done. You will have to add one more point on the route. Actually 3 points, and recompute the route via each of those and check the results :)

      0
  • rase

    Wednesday, March 7th, 2012 13:18

    72

    Excellent, fabulous..

    0
  • Sami

    Monday, March 5th, 2012 07:19

    71

    Excellent, fabulous, Marvelous, Brilliant work
    So Easy, So Clear

    0
  • Alex

    Sunday, February 26th, 2012 20:17

    70

    A great tool and tutorial, but where do I put my google API key? I don’t want to use up your quota!
    many thanks.

    0
  • Alex

    Sunday, February 26th, 2012 20:15

    69

    Hi, this is a great tutorial and tool, but was wondering where do I put my google API key? I don’t want to use up your quota! :)

    0
  • Hamed

    Friday, February 10th, 2012 22:30

    68

    good job
    it is my question too”Hi, your tutorial is excellent but may i know how do i calculate the distance for 5 markers ??”

    thanks for sharing

    0
  • Kangtp

    Thursday, January 26th, 2012 09:28

    67

    Hi, your tutorial is excellent but may i know how do i calculate the distance for 5 markers ??

    0
  • Shamal

    Sunday, January 22nd, 2012 02:15

    66

    The best tutorial ever.. Thank you so much for this. :)

    0
  • Ajith

    Monday, January 16th, 2012 07:31

    65

    Very innovative, great article. Cheeers :)

    0
  • Mr. Can

    Friday, December 16th, 2011 03:34

    64

    thanks very very much Irina Borozan, application is perfect. hehe

    0
  • Bhavit

    Thursday, November 10th, 2011 06:16

    63

    Hi,
    Thanks a lot for detailed tutorial. I was wondering If we can add hundreds of addresses or load result from excel/google spreadsheet (colum A is source and Column B is destination). It will be much appreciated if you can propose any solution.
    Thanks

    0
  • akkis

    Saturday, November 5th, 2011 13:47

    62

    This is really a GREAT tutorial! Thank you very much Irina!

    0
  • sushma

    Friday, November 4th, 2011 14:43

    61

    Hi,
    Very nice article, is there any usage limit that apply per month/per day.

    0
  • Lina

    Friday, November 4th, 2011 11:24

    60

    Hi, Thanks for your detailed explanation. I think you can help me. I am trying to draw a path based on a set of geo coordinates on my own map(not google maps) but I do not know how to create the path. Does google maps API support a function in which the returning result is a path(probably a set of lines)?

    0
  • cham2748

    Sunday, October 30th, 2011 15:01

    59

    i want to do same in visual basic application..please help me..i almost done with my app,but i cant do the exact thing in vb form..(im using vb 6) your help highly appreciated,thank you.

    0
  • heru

    Tuesday, October 18th, 2011 19:45

    58

    it’s cool, thanks a lot

    0
  • Ankit

    Monday, September 26th, 2011 18:34

    57

    I am trying to convert it into Miles but :( not getting any success plz anyone can help me out………

    0
  • ratheepan s

    Tuesday, August 30th, 2011 12:41

    56

    Hi, greaet work.

    How can we Build a Distance Finder with Google Maps API between two zipcodes.

    0
  • Bob

    Sunday, August 21st, 2011 04:07

    52

    Very nice, thanks for all the hard work. One question though. The “straight line distance” is always greater than the “chosen route” which seems to agree with Google Maps. How can the straight line distance be greater than a route that must follow roads and streets?

    0
  • Ch

    Friday, August 12th, 2011 09:03

    51

    Great tutorial. Keep the good work up.

    0
  • Liaqat Ali

    Wednesday, August 3rd, 2011 07:25

    50

    Hello,
    nice tutorial, and i implement it very easily in my site.
    I want 1 thing more, the distance between the cities are showing in English How can I show the distance in other languages. i need Portuguese Language.
    thanks in advace

    0
  • Shaheryar

    Wednesday, July 20th, 2011 20:32

    49

    hiya,

    I would say its wonderful tutorial I have came across, I was just wondering if you can give an idea how can I create random markers between start and end location. lets say start and end location is same and I want to put three way points randomly in such a way that I can control the duration of distance between start and end point. like if way points are placed randomly and I ckeck if distance is greater than 1 hour then reduce distance to one hour.

    I would really appreciate if you can propose a solution

    0
    • Irina

      Wednesday, August 24th, 2011 09:09

      54

      Hi

      Yes, this could be done. You will have to add one more point on the route. Actually 3 points, and recompute the route via each of those and check the results :)

      0
  • Dave

    Wednesday, July 13th, 2011 16:18

    48

    Great tutorial thank you very much, I was wondering if there was a way of adding the fuel cost into it? Cant seem to find anything on the api!

    0
    • Irina

      Wednesday, August 24th, 2011 09:07

      53

      Hi

      There’s nothing like that in the api, but you could add something. You get the distance from the api, use a variable for the fuel cost and compute the result :)

      0
  • Steve

    Friday, June 10th, 2011 13:36

    47

    Hi Irina,

    Great document very helpful for me and my project but i have a question:

    Is it possible to work out the distance im miles rather than KM?
    Is it possible to work out the round distance ie there and back? i am creating a mileage tracking system that would track the distance for the full journey.

    0
  • maddy

    Sunday, March 27th, 2011 15:34

    43

    superbbbbbbbb….. thanxs alot…. really best….

    0
  • Kalpesh

    Tuesday, March 8th, 2011 12:24

    42

    First Thanks a lot for such a superb helpful stuff.
    now here I need something more,
    like:”I want to offer the choose the way from Suggested routes(not by default shortest one)”.
    so its possible,please if it possible help me,
    thanks in advance….

    Thanks & Regards,
    Kalpesh

    0
  • Barto

    Thursday, February 17th, 2011 20:11

    41

    Hello. I was playing on your aplication and I found a small error. When You click show the aplication displays the map properly. But when You do it again (doesn’t matter if you change the location) map shows whole world and the javascript error occurs. I was trying to fix it. If you change the default zoom parameter from 1 to 2 it works perfect. I don’t know why exacly but it does.

    Thanks alot for this tutorial. It was very helpful for me.

    0
    • Irina

      Thursday, May 5th, 2011 10:40

      45

      I’m glad you liked it! I will check out the error you mentioned.

      0
  • Raw Hasan

    Thursday, February 17th, 2011 17:18

    40

    Hi Irina,

    Thanx a million for writing such an wonderful Google map tutorial! It is very good and well explained tutorial. Looking forward to read the second part. :)

    One thing I just can’t understand. Where to use the KEY which Google gives in the sign-up page? (I’m just a starter! :) )

    0
    • Irina

      Thursday, May 5th, 2011 10:42

      46

      I’m glad you liked it! Google maps api v3 doesn’t require an api key anymore :)

      0
  • Saransh

    Saturday, February 12th, 2011 08:16

    39

    Awesome tut….very helpful in daily life…also very innovative….

    0
  • pove

    Monday, December 20th, 2010 15:20

    38

    Great tuto! Thanks! For Spanish people, try to find the rou from “Vete” to “Cagar”, it exists!

    ;-)

    0
  • Abdullasoudi

    Thursday, October 28th, 2010 14:01

    37

    Great !! Thanks to you…

    0
  • shaun

    Wednesday, September 15th, 2010 15:06

    34

    very nice thanks but how do i output distance in miles and not km ? is it possible

    0
    • Irina

      Thursday, September 16th, 2010 11:53

      36

      You would just have to compute the return values from gmaps from kms to miles :)

      0
  • Ryan

    Monday, September 13th, 2010 15:05

    32

    Hi Irina

    What an awesome tutorial thank you. Pehaps you can point me in the right direction:

    When a user starts typing in an address i would like it to automatically dropdown a suggested list of addresses. The same as it works for google map directions.

    If you can point me in the right direction It would be greatly appreciated.

    thanks
    Ryan

    0
    • Irina Borozan

      Wednesday, September 15th, 2010 09:40

      35

      Hello

      You would need to use some code for that auto-complete. There are loads of libraries (in javascript, jquery) available. Here’s an example:

      The library you choose to use depends on the programming language your app is written in and on the location of the data you want to show in the drop down.

      I hope this helps!

      0
  • Ryan

    Monday, September 13th, 2010 19:37

    31

    Hi Irina

    Do you know how i can get the google formatted address? Basically take the address entered and get the address back from google formatted correctly?

    Thanks in advance
    Ryan

    0
    • Irina Borozan

      Wednesday, September 15th, 2010 09:42

      33

      Hello

      That’s a really good idea! I haven’t thought of doing this before, but I will definitely look into it. I don’t know if there are any converters available though. You might need to write your own.

      I’ll let you know if I find anything useful!

      0
  • bago

    Sunday, July 11th, 2010 13:50

    30

    very nice and very usable!!!
    a little hint: why don’t u convert the distance in a more useful way? i.e. in km

    0
  • leonid

    Friday, July 9th, 2010 11:19

    29

    it`s great lesson!
    thanks.

    0
  • niks

    Tuesday, July 6th, 2010 10:48

    28

    Hey. Great tutorial. I have always used google maps. Its interesting to see that there is lot more to it.

    0
  • hackxue

    Monday, July 5th, 2010 08:01

    25

    Irina,Good work!
    I wanna to know if it could show the bus line!?

    0
  • shafi

    Sunday, July 4th, 2010 18:33

    24

    Hi!
    Yep, Nice article, helped me alot.

    Thanks.

    0
    • Irina

      Monday, July 5th, 2010 11:40

      26

      I’m glad you liked it!

      0
  • daniele

    Thursday, July 1st, 2010 22:58

    22

    i had to do this time ago for a website.
    don’t store the address, but use the lat and the long instead

    first of all i looped a php page that reads the addresses from the db, find lat and long via google geolocation and then store it into the db. starting from this moment you can always geolocate the point in the google maps reading its coordinates

    0
    • Irina

      Friday, July 2nd, 2010 12:16

      23

      That’s a good idea!

      0
  • Omer Rosenbaum

    Wednesday, June 30th, 2010 14:15

    21

    Hi Irina!
    Great stuff you made there. I want to continue developing it and combine it with MySql.
    What I am trying to do is to get the 2 addresses into a DB. So far I haven’t had much success. Could you or anyone else can try to prepare such thing?

    0
    • Irina

      Wednesday, June 30th, 2010 14:31

      20

      That’s a good idea! I am probably going to write another tutorial on google maps and I could also add this to it.

      In the meantime, if you need some help with what you’ve tried so far, send me a message or something and I could help you.

      0
  • Irina

    Wednesday, June 30th, 2010 14:28

    19

    Thank you all for the tips and ideas! I might be adding some to my next google maps tutorial :)

    0
  • Shawn McConnell

    Wednesday, June 30th, 2010 05:25

    15

    Irina, nice tutorial I have done something similar on my site but I just outline the locations of where I have previously worked on my resume page. this helps potential people see the general area I work in.

    Shawn,

    0
    • Irina

      Wednesday, June 30th, 2010 14:26

      18

      Thats a good idea of using google maps! :)

      0
  • emil

    Wednesday, June 30th, 2010 01:10

    14

    Multumesc pentru tutorial. Daca se poate traseu si cu ruta din 1, 2 puncte de trecere.
    Emil

    0
    • Irina

      Wednesday, June 30th, 2010 14:24

      17

      Bună idee :)

      It’s not very difficult to add more points on a route as you said, you just have to multiply to code for the textboxes and markers :)

      0
  • Saad Bassi

    Tuesday, June 29th, 2010 18:32

    13

    Really awesome Tut Irina. Thumbs up. :)

    0
  • Irina

    Tuesday, June 29th, 2010 22:57

    12

    I’ve just found out google maps turns 5 today! Nice coincidence!

    They’ve made a map with applications made by users and I’ve added mine there :)

    0
  • Andrea

    Tuesday, June 29th, 2010 14:27

    8

    Very interesting, You should complete it adding driving directions!

    0
    • Saad Bassi

      Tuesday, June 29th, 2010 16:46

      11

      Stay Tuned for the 2nd part coming on Thursday.:)

      0
  • Matt

    Tuesday, June 29th, 2010 20:14

    7

    Nice tutorial! One question: why do you set the zoom level at 1? Wouldn’t it be better to make the zoom level high enough to show just the area with the two points defined by the user?

    0
    • Irina Borozan

      Tuesday, June 29th, 2010 21:47

      10

      I’ve left it at 1 because if google can find a route between the two addresses, it automatically adjusts the zoom level when showing the route.

      0
      • Matt

        Wednesday, June 30th, 2010 05:41

        16

        Ah, excellent. Thanks!

        0
  • Frank Bailey

    Tuesday, June 29th, 2010 19:39

    6

    Hi Irina, this is a great tutorial, thanks a ton! I’d just like to know if you might be able to provide a quick example of how we might be able to allow the user to click a point on the map to use as either the destination or origin, rather than entering and then geocoding the address?

    0
    • Irina Borozan

      Tuesday, June 29th, 2010 21:45

      9

      Hey, good idea! You’ll see something similar to this in the second part of the tutorial, which will be posted in a couple of days ;) I’m glad you enjoyed this one!

      0
  • Bojan

    Tuesday, June 29th, 2010 12:18

    5

    Hi!
    Very nice article, a small digression, you don’t need an API key if you’re using Googla Maps API v3. (You also didn’t use an API key in example provided with post.)
    Regards

    +1
  • Irina

    Tuesday, June 29th, 2010 16:58

    4

    Thanks for all the comments and tips! I’m glad you like it :)

    0
  • aditya

    Tuesday, June 29th, 2010 16:28

    3

    this is very nice post

    0
  • George Chatzimanolis

    Tuesday, June 29th, 2010 12:25

    2

    THANKS!!! It is an excellent tutorial.

    0
  • Pierre

    Tuesday, June 29th, 2010 12:24

    1

    Nice tut! Thanks.
    I saw a website using Google Maps like your tutorial, providing this kind of tool: http://distancity.com

    0

Comments are closed.

54.211.212.174 - unknown - unknown - US