Welcome to the website of Davis Fiore

Javascript - how to use Geolocation?

Tue, 09/27/2016 - 16:59 |

admin

HTML 5 supports the geolocation API to find geographical positions on a map.

Here is a basic example:

	<!DOCTYPE html>
	<body>
	    <script>

		/*
		* This method renders the map of the current location
		*/
		function success(position) {

		    // Retrieve current latitude and longitude
		    var latlng = new google.maps.LatLng(position.coords.latitude, 
		        position.coords.longitude);

		    // Set options used to render the map
		    var myOptions = {
		        zoom: 15,
		        center: latlng,
		        mapTypeControl: false,
		        navigationControlOptions: {
		            style: google.maps.NavigationControlStyle.SMALL
		        },
		        mapTypeId: google.maps.MapTypeId.ROADMAP
		    };

		    // Render map into the div
		    var map = new google.maps.Map(document.getElementById("canvas"), myOptions);

		    // Render pin onto the map
		    var marker = new google.maps.Marker({
		        position: latlng,
		        map: map
		    });
		}

		/*
		* This method show an error message, in case something goes wrong
		*/
		function error(error) {
		    switch (error.code) {
		        case 1:
		            alert('Permission denied');
		            break;
		        case 2:
		            alert('Position unavailable');
		            break;
		        case 3:
		            alert('Request timeout');
		            break;
		    }

		}

		if (navigator.geolocation) {
		    navigator.geolocation.getCurrentPosition(success, error);
		} else {
		    alert("Geolocation not supported");
		}
	    </script>

	    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
            </script>

	    <div id="canvas" style="width:300px;height:300px;"></div>

	</body>
	</html>