You are not logged in.
i'm trying to write a script that will identify a user's location using geoLatLng, and then if successful plot a route to a predefined location (say my office). i'm newish to JS so am having a bit of trouble.
what i want to happen is:
if geolocation enabled get user's location plot route to predefined location else alert - unable to determine your location, enable geolocation services or consult the map for our address show map with marker to predefined address
here's what i have so far - please excuse syntactical errors. am i going in the right direction? how do i check if a user has geolocation enabled?
<script type="text/javascript">
$(function () {
//get the user's location
function getLocation(){
$('#map').gmap3({
action : 'geoLatLng',
callback : function(latLng){
if (latLng){
$(this).gmap3({
action: 'addMarker',
latLng:latLng
},
"autofit");
}
}
});
}
//plot directions
function plotRoute() {
$('#map').gmap3({
action: 'getRoute',
options:{
origin: 'latLang',
destination: 'Tallaght Business Park, Dublin, Ireland'
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (!results) return;
$(this).gmap3({
action: 'init',
zoom: 13,
mapTyprId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
},
action: 'addDirectionsRenderer',
options: {
preserveViewPort: true,
draggable: true,
directions: results
}
);
}
});
}
});
</script>all help appreciated
Offline
here's an updated version of what i'm trying to do, may be a bit clearer. anyone out there?!
<script type="text/javascript">
$(function (){
var dest = "Tallaght Business Centre, Whitestown Rd, Tallaght Business Park, Dublin 24, Co. Dublin, Ireland";
if(geolocEnabled()){
getLocation();
plotRoute();
}else{
plotMarker();
}
//check if geolocation enabled
function geolocEnabled(){
return navigator.geolocation;
}
//plot marker for VRF office
function plotMarker(){
$('#map').gmap3(
{ action: 'addMarker',
address: dest,
map:{
center: true,
zoom: 14
},
marker:{
options:{
draggable: false
}
}
}
);
}
//get user's location
function getLocation({timeout: 10000}){
$('#map').gmap3(
{ action : 'geoLatLng',
callback : function(latLng){
if (latLng){
var userLocation = latLang;
} else {
alert("Unable to determine your location. Enable geolocation services\n and try again, or consult the map for out location.");
}
}
});
}
//plot route
function plotRoute(userLocation){
$('#map').gmap3(
{ action:'getRoute',
options:{
origin: userLocation,
destination: dest,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (!results) return;
$(this).gmap3(
{ action:'init',
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
//center: [-33.879, 151.235]
},
{ action:'addDirectionsRenderer',
options:{
preserveViewport: true,
draggable: false,
directions:results
}
}
);
}
}
);
}
});
</script>
Last edited by smallmos (2012-08-17 11:05:31)
Offline
i removed {timeout: 10000} from getLocation, it's now starting to get through the code and executes the first alert, it's just not actually doing anything. i removed var userLocation and left it as latLng, would this make a difference? also added in a button to display directions - obviously not working though...
updated code below:
<script type="text/javascript">
$(function (){
var dest = "Tallaght Business Centre, Whitestown Rd, Tallaght Business Park, Dublin 24, Co. Dublin, Ireland";
if(geolocEnabled()){
getLocation();
plotRoute();
}else{
plotMarker();
}
//check if geolocation enabled
function geolocEnabled(){
return navigator.geolocation;
}
//plot marker for VRF office
function plotMarker(dest){
$('#map').gmap3(
{ action: 'addMarker',
address: dest,
map:{
center: true,
zoom: 14
},
marker:{
options:{
draggable: false
}
}
}
);
}
//get user's location
function getLocation(){
$('#map').gmap3(
{ action : 'geoLatLng',
callback : function(latLng){
if (latLng){
//var userLocation = latLang;
return;
} else {
alert("Unable to determine your location. Enable geolocation services and try again, or consult the map for out location.");
}
}
});
}
//plot route
function plotRoute(latLng, dest){
$('#map').gmap3(
{ action:'getRoute',
options:{
origin: latLng,
destination: dest,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (!results) return;
$(this).gmap3(
{ action:'init',
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
//center: [-33.879, 151.235]
},
{ action:'addDirectionsRenderer',
options:{
panelID: 'directions-panel',
preserveViewport: true,
draggable: false,
directions:results
}
}
);
}
}
);
}
//on click show directions from origin to destination in directions panel
$('#show-directions-button').click(function(){
$('#map').gmap3({
action: setDirectionsPanel,
id: directions-panel
});
});
});
</script>
Offline