Skip to content

Instantly share code, notes, and snippets.

@xandout

xandout/geoCode.html

Last active August 29, 2015 13:57
Show Gist options
  • Save xandout/9761830 to your computer and use it in GitHub Desktop.
Save xandout/9761830 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
geoCode.html
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
geocoder = new google.maps.Geocoder()
function geoCode(address){
var simpleLoc = {};
geocoder.geocode({ 'address': address }, function(results, status) {
simpleLoc['status'] = status;
simpleLoc['latlng'] = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
});
return simpleLoc;
}
</script>
<script type="text/javascript">
var dests = new Array();
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var home = new google.maps.LatLng(35.744848,-81.68665499999997); //Home Base
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: home
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function addAddress(){
dests.push(geoCode(document.getElementById('address_text').value));
//dests[i].latlng;
document.getElementById('address_text').value = '';
}
function calcRoute() {
var start = home;
var end = home;
var points = [];
for(var wp in dests){
points[wp] = {};
points[wp]['location'] = dests[wp].latlng;
points[wp]['stopover'] = true;
}
var request = {
origin: start,
destination: end,
waypoints: points,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
</script>
<body onload="initialize();">
<div id="map_canvas" style="width:70%; height:100%; float:left"></div>
<div id="dirs" style="width:30%;height:100%;float:right;">
<input id="address_text"></input>
<button onclick="addAddress();">Add Address</button>
<button onclick="calcRoute();">Calculate</button>
<div id="directionsPanel" style="float:right;width:90%;height 100%; border-style:solid; border-width:5px;"></div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment