Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adds documentation corrects and halfway_point documentation #10

Merged
merged 1 commit into from
Sep 5, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions _docs/create_map.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,16 @@ var map = new google.maps.Map(document.getElementById("map"), {<options>});
* A full list of interesting options can be found at the [Google Maps API Reference Page](https://developers.google.com/maps/documentation/javascript/reference#MapOptions)

```js
var map_options = {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapTypeId: 'HYBRID',
backgroundColor: teal
}

var map = new google.maps.Map(document.getElementById("map"), {map_options});
function initMap()
{
var map_options = {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapTypeId: 'roadmap'
}

var map = new google.maps.Map(document.getElementById("map"), {map_options});
}
```

3 changes: 2 additions & 1 deletion _docs/create_route.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,10 @@ function calcRoute() {
```js

var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

//Put this line inside the <status == 'OK'> callback function from the code above

directionsDisplay.setDirections(result);
console.log(result);

Expand Down
49 changes: 49 additions & 0 deletions _docs/find_halfway_point.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,54 @@
##Finding the Halfway Point || [Back to Table of Contents](_table_of_contents.md)

####Intro
Using [Google Maps API Reference](https://developers.google.com/maps/documentation/javascript/reference#DirectionsRoute)

Once we have get the route JSON object back from google, we have access to a lot of information including the distance between the two points.
```js
results.routes[0].legs[0].distance
```

The challenge is to show the user a halfway point on the map that is halfway between the origin and destination and along the *route*, not halfway between a straight line. This means that if the route curves around a lake, then the halfway point appears on the *road* and not in the middle of the lake.

Luckily, the route JSON object includes something called the overview_path

```js
results.routes[0].overview_path
```

The overview_path is an array of lat/lng coordinates along the route. We should be able to iterate through the array and find the single lat/lng coordinate the represents the halfway point of the route.

So how do we do this? Good question, Jeff.

One idea is to simply take the overview_path array and divide it by 2 to get the center of the array.

For example:
```js
coordinates_array = results.routes[0].overview_path
half = (coordinates_array.length / 2)
halfway_point = coordinates_array[half]

> halfway_point = {lat: XX, lng: XX}

```

This might work? But there's no way to know if this point is actually halfway between the origin and destination, just that it's in the center of the array that google gave us.

Luckily, we have a method to check the distance of one point to another.
[From Google Reference](https://developers.google.com/maps/documentation/javascript/reference#spherical) use the computeDistanceBetween(LatLng, LatLng) method.

We can calculate the distance from the starting point to the halfway point and also the distance from the ending point to the halfway point. If these numbers are about equal, then we have a good halfway point.
```js
//Distance from starting point to halfway_point

computeDistanceBetween(starting_point, halfway_point)


//Distance from ending point to halfway_point

computeDistanceBetween(ending_point, halfway_point)

//If these two numbers are about equal, then we have a good halfway point.
```

####Coding