Hi,
I am a bit of a novice when it comes to JS and I am trying to work out a
small app for my website which enables the user to get directions to me from
his/her current position.
I have the first part working (get current position) but not the second (get
directions). I could be way out here, I just don't know.
<body>
<section id="wrapper">
<header>
<h1>geolocation</h1>
</header><meta name="viewport" content="width=620" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false";></script>
<article>
<p>Finding your location: <span id="status">checking...</span></p>
<!-- <div id="map_canvas" style="float:left;width:70%;
height:100%"></div> -->
<input name="directions" type="button" value="Get Directions"
onClick="calcRoute()">
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</article>
<script>
var latlng;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function success(position) {
var s = document.querySelector('#status');
if (s.className == 'success') {
// not sure why we're hitting this twice in FF, I think it's to do with
a cached result coming back
return;
}
s.innerHTML = "found you!";
s.className = 'success';
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '560px';
document.querySelector('article').appendChild(mapcanvas);
latlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style:
google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcanvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function error(msg) {
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'fail';
// console.log(arguments);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
function calcRoute() {
var start = latlng;
var end = 'Westminster, London';
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
<footer></footer>
</section>
</body>
Can anyone give me some direction.
Thanks
Phil
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
