Hey everyone, I am new here so sorry if I overlap on what anyone else has said. I just had a few questions regarding some of the map features that can be customized.

1. How do you set up “stops”? Also, how do you put names on those stops?

2. How do you figure out the arrival time to each stop in terms of minutes? This is a very important feature and I am very interested to see how this is done.

3. How do you create routes on your map?

4. How do you change the image used as the icon for the device you are tracking.

Thank you very much in advance for any help you can give me!

Great questions. I’m going to try and get the Tufts guys to share their thoughts as they’ve done some extensive work in this area: http://joey.tufts.edu

Let me take a stab at a few of your questions in the meantime. For stops you can identify the coordinates by clicking on a Google map. A great utility for both creating routes overlays and stops is the Interactive Polyline Encoder:

http://code.google.com/apis/maps/documentation/polylineutility.html

To put names on the stops check out the LabeledMarker class:

http://googlemapsapi.blogspot.com/2007/04/labeledmarker-v10-do-more-with-your.html

To change the marker on the map you can easily do this by using the GMarker class:

http://code.google.com/apis/maps/documentation/reference.html#GMarker

If you look inside the main.js file in your project you’ll see references to the GMarker class, which can be passed a GIcon object. Hopefully this will get you started while others chime in.

For calculating ETA you could start with something simple that grabs the speed and location of the most recent reading. This reading can then be compared to the next stop point on the route and a time calculation can be made. Here’s a Google Maps sample of determining the distance between points (just click on the map multiple times):

http://www.daftlogic.com/projects-google-maps-distance-calculator.htm

Once you know the distance you can divide by mph to get a rough time calculation in hours, which can then be converted to minutes. This isn’t 100% accurate, but may be a decent starting place for testing. My hunch is that you’ll need to do a few iterations of testing before you find something you like.

Hey, thanks! I will look into it more with the information you gave me. Thanks for the quick response and I hope your all having a good weekend. I look forward to hearing what the tufts guys did as that is pretty much exactly what I want to do.

Thanks again!

Hey guys thanks for all the help,

I was wondering if you had any information as to how the developers did it at http://joey.tufts.edu? Did they do similar to mentioned above? Or is there a way to calculate it via roads and not just as the crow flies.

Thanks!

You can view the page source at joey.tufts.edu and get a glimpse of how they do it. First they create labels for each of their stops:

map.addOverlay(createLabel(new GLatLng(42.396333, -71.122527), “Davis Square”));
map.addOverlay(createLabel(new GLatLng(42.405698, -71.119781), “Mayer Campus Center”));
map.addOverlay(createLabel(new GLatLng(42.409500, -71.122034), “Carmichael Hall/Wren Hall”));
map.addOverlay(createLabel(new GLatLng(42.407837, -71.121712), “Olin Hall”));

Then they add the bus route overlay on the map using the polyline encoder tool mentioned above:

map.addOverlay(new GPolyline.fromEncoded({
          color: “#0000FF”,
          weight: 10,
          //note that backslashes (\) must be escaped by adding another \ in front of each
          points: “qkyaGppaqLfA{DQgFh\\qCtGrKpFfNfJlEwCbDwUvQuLdE|E}P|Fm^e@_NqWvBPnFqBnM}CkB{HtWsJsFTeBa@k@h@uA|AbAfBoHhInFrDsM”,
          levels: “BBBBBBBBBBBBBBBBBBBBBBBBBB”,
          zoomFactor: 32,
          numLevels: 4
        }));

Then you can see they use simple logic that determines whether or not the bus is close to a stop:

//override campus center alert if bus is getting close
if (arrBuses.getPoint().y > 42.40567403715082 && arrBuses.getPoint().x > -71.124759 && arrBuses.getPoint().y < 42.410498 && arrBuses.getPoint().x < -71.11907243728638) {
  timeToCampusCenter = “<span style=\“color: #de6020;\”>less than 5 min</span>”;
}

Hi.  I wrote the code over at the Tufts site.  Let me see if I can address some of your questions.

1) The names on the stops are places on the map with a Google Maps API “extension” called ELabels, which very basically just lets you position text labels on Google Maps.  The use of this extension is written up at http://econym.org.uk/gmap/elabel.htm

2) The arrival time estimates are actually a little primitive, currently.  As you can see from the JavaScript code Dennis pasted above for you, the logic for this is very specific to the route our bus drives—when the bus is on a section of the route where we know it’s almost to one of the stops, we adjust the ETA for that stop.  This is done strictly with coordinates so far, testing to see if the bus’s coords fall within a specific rectangle on the map.

3) The route drawn on the map is a GPolyline as described by the GMaps API…...again, the coordinates simply hardcoded for our route.

4) As indicated by Dennis above, the Google Maps API Reference pages describe how to change the marker image.  The Google Maps Group discussion boards (http://groups.google.com/group/Google-Maps-API) are an excellent resource for someone learning the Google Maps API; lots of the most basic questions can be answered simply by searching the forums.

Let me know if I can help out by clarifying or answering any other questions.

E J Kalafarski