Created
January 5, 2011 16:38
-
-
Save jasonclark/766561 to your computer and use it in GitHub Desktop.
html 5 geolocation, Google geocoder API - find position and set value in search form field.
demo: http://www.lib.montana.edu/~jason/files/geolocate/index-html5-geo.php
This file contains 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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| <head> | |
| <title>re: This Place - Location Matters : Montana State University Libraries</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <link rel="alternate" type="application/rss+xml" title="MSU Libraries: Tools" href="http://feeds.feedburner.com/msulibrarySpotlightTools" /> | |
| <style type="text/css" media="screen, projection, handheld"> | |
| <!-- | |
| @import url("/~jason/files/geolocate/meta/styles/master.css"); | |
| --> | |
| </style> | |
| <script type="text/javascript" src="./meta/scripts/global.js"></script> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
| </head> | |
| <body class="default" onload="initialize()"> | |
| <h1>re: This Place - Location Matters<span>: MSU Libraries</span><small>(working code and proof of concepts)</small></h1> | |
| <div class="container"> | |
| <ul id="tabs"> | |
| <li id="tab1"><a href="./index.php">Demo App</a></li> | |
| <li id="tab2"><a href="./what.php">What is this?</a></li> | |
| <li id="tab3"><a href="./code.php">View Code</a></li> | |
| </ul><!-- end tabs unordered list --> | |
| <div class="main"> | |
| <h2>Getting your location: <span id="status">checking...</span></h2> | |
| <div id="cantfindyou"></div> | |
| <div id="map" style="width:710px;height:350px;"></div> | |
| <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> | |
| <!-- fail nicely if the browser has no Javascript --> | |
| <noscript><strong>JavaScript must be enabled in order for you to use Google Maps.</strong> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again.</noscript> | |
| <script type="text/javascript"> | |
| function $(id){ | |
| return document.getElementById(id); | |
| } | |
| var trackerId = 0; | |
| var geocoder; | |
| var theUser = {}; | |
| var map = {}; | |
| function initialize() { | |
| geocoder = new google.maps.Geocoder(); | |
| if (navigator.geolocation){ | |
| var gps = navigator.geolocation; | |
| gps.getCurrentPosition(function(pos){ | |
| 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 latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude); | |
| var opts = { | |
| zoom: 7, | |
| center: latLng, | |
| mapTypeId: google.maps.MapTypeId.TERRAIN, | |
| mapTypeControl: true, | |
| mapTypeControlOptions: { | |
| style: google.maps.MapTypeControlStyle.DROPDOWN_MENU | |
| }, | |
| navigationControl: true, | |
| navigationControlOptions: { | |
| style: google.maps.NavigationControlStyle.SMALL | |
| } | |
| }; | |
| map = new google.maps.Map($("map"), opts); | |
| theUser = new google.maps.Marker({ | |
| position: latLng, | |
| map: map, | |
| title: "You are here." | |
| }); | |
| showLocation(pos); | |
| }); | |
| trackerId = gps.watchPosition(function(pos){ | |
| var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude); | |
| map.setCenter(latLng); | |
| theUser.setPosition(latLng); | |
| showLocation(pos); | |
| }); | |
| } else { | |
| document.getElementById("cantfindyou").innerHTML = "Hmmm... I don't know. Good hiding!"; | |
| } | |
| } | |
| function showLocation(pos){ | |
| var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude); | |
| var lat = pos.coords.latitude; | |
| var lng = pos.coords.longitude; | |
| document.getElementById("lat").value = lat; | |
| document.getElementById("lng").value = lng; | |
| if (geocoder) { | |
| geocoder.geocode({'latLng': latLng}, function(results, status) { | |
| if (status == google.maps.GeocoderStatus.OK) { | |
| if (results[1]) { | |
| $("loc").innerHTML = results[1].formatted_address; | |
| document.getElementById("q").value = results[1].formatted_address.toLowerCase(); | |
| } | |
| } | |
| }); | |
| } | |
| } | |
| /*function stopTracking(){ | |
| if (trackerId){ | |
| navigator.geolocation.clearWatch(trackerId); | |
| } | |
| }*/ | |
| </script> | |
| <p>Do you want us to use the location of <strong><span id="loc"></span></strong> to find local interest items for you?</p> | |
| <form id="searchBox" method="get" action="./search.php"> | |
| <fieldset> | |
| <label for="q">Search</label> | |
| <input type="hidden" name="lat" id="lat" value="" /> | |
| <input type="hidden" name="lng" id="lng" value="" /> | |
| <input type="text" maxlength="200" name="q" id="q" tabindex="1" value="" /> | |
| <button type="submit" class="button">Search</button> | |
| </fieldset> | |
| </form> | |
| </div><!-- end div main --> | |
| </div><!-- end container div --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment