This uses Google Maps API to detect location of mobile device, and then show map & directions to one fixed location, like a library branch.
First add this line:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true">
</script>
Second add these functions:
<script>
(function () {
var directionsService = new google.maps.DirectionsService(),
directionsDisplay = new google.maps.DirectionsRenderer(),
createMap = function (start) {
var travel = {
origin : (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,
destination :"38.936165,-76.996363",
travelMode : google.maps.DirectionsTravelMode.DRIVING
// Exchanging DRIVING to WALKING above can prove quite amusing :-)
},
mapOptions = {
zoom: 10,
// Default view: lat & lng of center of map, CUA Law School
center : new google.maps.LatLng(38.936165,-76.996363),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-image"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("map-directions"));
directionsService.route(travel, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
};
// Check for geolocation support
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
// Success!
createMap({
coords : true,
lat : position.coords.latitude,
lng : position.coords.longitude
});
},
function () {
// Gelocation fallback: If can not get location
createMap({
coords : false,
address : "3600 John McCormack Rd., NE Washington DC 20064"
});
}
);
}
else {
// No geolocation fallback: Defaults CUA LAW
createMap({
coords : false,
address : "3600 John McCormack Rd., NE Washington DC 20064"
});
}
})();
</script>
<div id="map-container">
<div id="map-image"> </div>
<div id="map-directions"> </div>
</div>
Styles to make to control look and feel:
<p><style type="text/css">
#map-container {
overflow: hidden;
}
#map-image {
width: 500px;
height: 400px;
margin:auto;
}
#map-directions {
width: 500px;
margin:auto;
background:#FFF;
}
</style></p>
How to do the same thing with other mapping services:
Bing
, click More, the three vertical stacking dots
.
