Last active
August 29, 2015 14:06
-
-
Save tusharvikky/2ed10f5a955287d0e8f5 to your computer and use it in GitHub Desktop.
Perfecting HTML5 Geolocation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Perfecting HTML5 Geolocation</title> | |
| <meta name="description" content="Perfecting HTML5 Geolocation"> | |
| <meta name="keywords" content="HTML5,CSS,JavaScript,GeoLocation"> | |
| <meta name="author" content="Tushar Deo <tushar.deo(at)lokconnect.com>"> | |
| <!-- Styles --> | |
| <style type="text/css"> | |
| body{color:#333}.map_canvas{width:600px;height:400px;margin:10px 20px 10px 0} | |
| </style> | |
| <!-- JS Includes --> | |
| <!-- Jquery CDN --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <!-- Google Maps JS v3 API --> | |
| <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> | |
| <!-- Geocomplete API - This will help us embed. (You can however use native Google Map API) --> | |
| <script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script> | |
| <!-- Google API --> | |
| <script type="text/javascript" src="http://www.google.com/jsapi"></script> | |
| <!-- app.JS --> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| // Set default location from Google API grabbed from "http://www.google.com/jsapi" | |
| initialLocation = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude); | |
| // Embed Map with Google Map object | |
| embedMap(initialLocation); | |
| // Ask for GeoLocation permission | |
| if(navigator.geolocation) { | |
| // getCurrentPosition(location, error) | |
| navigator.geolocation.getCurrentPosition(showPosition, showApproxPosition); | |
| } | |
| function showPosition (location) { | |
| // Grab exact location from navigator | |
| initialLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude); | |
| // and update map/marker with Google Map Object | |
| updateMap(initialLocation); | |
| } | |
| function showApproxPosition (error) { | |
| // location denied/error | |
| // grab location from Google APIs | |
| console.log(error); | |
| if(google.loader.ClientLocation) { | |
| initialLocation = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude); | |
| updateMap(initialLocation); | |
| } | |
| } | |
| function embedMap (initialLocation) { | |
| $("#geocomplete").geocomplete({ | |
| map: ".map_canvas", | |
| location: initialLocation, | |
| mapOptions: { | |
| zoom: 10, | |
| scrollwheel: true, | |
| }, | |
| markerOptions: { | |
| draggable: true, | |
| } | |
| }) | |
| .bind("geocode:dragged", function(event, latLng){ | |
| console.log(latLng); | |
| }); | |
| } | |
| function updateMap (location) { | |
| var map = $("#geocomplete").geocomplete("map"); | |
| var marker = $("#geocomplete").geocomplete("marker"); | |
| marker.setPosition( location ); | |
| map.panTo( location ); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Geocomplete requires one Input field w/ which you can bind map --> | |
| <input id="geocomplete" type="hidden" /> | |
| <!-- Map Canvas --> | |
| <div class="map_canvas"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment