hanafiah · August 29, 2015 13:56
diff --git a/html5 geolocation.html b/html5 geolocation.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>Geolocation</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
        <script>
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;
            var mylocation;
            var dest;

            function initialize() {

                directionsDisplay = new google.maps.DirectionsRenderer();
                //set  destination
                dest = new google.maps.LatLng(5.372376, 100.424134);

                var destInfo = new google.maps.InfoWindow({
                    position: dest,
                    content: 'Lokasi Makmal'
                });


                var mapOptions = {
                    zoom: 20,
                    center: dest
                }
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                directionsDisplay.setMap(map);
                destInfo.setMap(map);

                map.setCenter(dest);

                // Try HTML5 geolocation
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
 //                        / mylocation = new google.maps.LatLng(5.372714, 100.424727);
                         mylocation = new google.maps.LatLng(position.coords.latitude,
                                position.coords.longitude);

                        var infowindow = new google.maps.InfoWindow({
                            map: map,
                            position: mylocation,
                            content: 'Lokasi Sekarang'
                        });
                        calcRoute();

                    }, function() {
                        handleNoGeolocation(true);
                    });
                } else {
                    handleNoGeolocation(false);
                }
            }

            function handleNoGeolocation(errorFlag) {
                if (errorFlag) {
                    var content = 'Error: The Geolocation service failed.';
                } else {
                    var content = 'Error: Your browser doesn\'t support geolocation.';
                }

                var options = {
                    map: map,
                    position: new google.maps.LatLng(60, 105),
                    content: content
                };

                var infowindow = new google.maps.InfoWindow(options);
                map.setCenter(options.position);
            }

            function calcRoute() {
                var request = {
                    origin: mylocation,
                    destination: dest,
                    travelMode: google.maps.TravelMode.WALKING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Geolocation</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	html, body, #map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
	<script>
	var directionsDisplay;
	var directionsService = new google.maps.DirectionsService();
	var map;
	var mylocation;
	var dest;

	function initialize() {

	directionsDisplay = new google.maps.DirectionsRenderer();
	//set destination
	dest = new google.maps.LatLng(5.372376, 100.424134);

	var destInfo = new google.maps.InfoWindow({
	position: dest,
	content: 'Lokasi Makmal'
	});


	var mapOptions = {
	zoom: 20,
	center: dest
	}
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	directionsDisplay.setMap(map);
	destInfo.setMap(map);

	map.setCenter(dest);

	// Try HTML5 geolocation
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	// / mylocation = new google.maps.LatLng(5.372714, 100.424727);
	mylocation = new google.maps.LatLng(position.coords.latitude,
	position.coords.longitude);

	var infowindow = new google.maps.InfoWindow({
	map: map,
	position: mylocation,
	content: 'Lokasi Sekarang'
	});
	calcRoute();

	}, function() {
	handleNoGeolocation(true);
	});
	} else {
	handleNoGeolocation(false);
	}
	}

	function handleNoGeolocation(errorFlag) {
	if (errorFlag) {
	var content = 'Error: The Geolocation service failed.';
	} else {
	var content = 'Error: Your browser doesn\'t support geolocation.';
	}

	var options = {
	map: map,
	position: new google.maps.LatLng(60, 105),
	content: content
	};

	var infowindow = new google.maps.InfoWindow(options);
	map.setCenter(options.position);
	}

	function calcRoute() {
	var request = {
	origin: mylocation,
	destination: dest,
	travelMode: google.maps.TravelMode.WALKING
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	}
	});
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	</body>
	</html>