Skip to content

Instantly share code, notes, and snippets.

@fillano

fillano/simple geolocation test

Created November 5, 2010 16:26
Show Gist options
  • Save fillano/664395 to your computer and use it in GitHub Desktop.
Save fillano/664395 to your computer and use it in GitHub Desktop.
Download ZIP
測試getCurrentPosition(), watchPosition(), 結合google map api
Raw
simple geolocation test
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
div.info {
border: solid 2px #336699;
margin: 10px;
padding: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
vertical-align: top;
text-align: center;
display: inline-block;
}
#support {
width: 120px;
}
#msg {
width: 320px;
background: #AACCEE;
text-align: left;
font-size: 12px;
display: block;
}
#map-canvas {
border: solid 1px #336699;
width: 480px;
height: 480px;
position: relative;
z-index: 1;
display: inline-block;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div class="info" id="support"></div>
<div class="info">
<input id="curr" value="currentPos" type="button">
<input id="watch" value="watchPos" type="button">
<input id="stop" value="stopWatch" type="button">
<input id="map" value="showMap" type="button">
<div class="info" id="msg"></div>
</div>
<div id="map-canvas"></div>
</body>
</html>
<script>
(function(window, undefined) {
var navigator = window.navigator,
document = window.document,
id = function(s) {return document.getElementById(s);};
if(!navigator.geolocation) {
id('support').innerHTML = "OH, NO...I don't support GeoLocation."
id('curr').disabled = true;
id('watch').disabled = true;
id('stop').disabled = true;
id('map').disabled = true;
id('msg').innerHTML = 'Opppps.......Orz';
return;
} else {
id('support').innerHTML = "YES! I DO support GeoLocation?"
id('msg').innerHTML = '<li>Please try out.</li>';
}
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(id("map-canvas"), myOptions),
geo = navigator.geolocation,
msg = id('msg'),
posHandler = {
"wid": -1,
"handleEvent": function(pos) {
var str = '<li>Position Info:<ol>';
for(var i in pos) {
if(pos.hasOwnProperty(i)) {
if(i == 'coords') {
str += '<li>Coordinates:<ul>';
for(var j in pos[i]) {
if(pos[i].hasOwnProperty(j)) {
str += '<li>' + j + ' : ' + pos[i][j] + '</li>';
}
}
str += '</ul></li>';
} else {
str += '<li>' + i + ' : ' + pos[i] + '</li>';
}
}
}
str += '</ol></li>';
msg.innerHTML += str;
}
},
errorHandler = {
"handleEvent": function(e) {
msg.innerHTML += '<li>' + e.message + '</li>';
}
};
id('curr').addEventListener('click', function() {
geo.getCurrentPosition(
posHandler.handleEvent,
errorHandler.handleEvent
);
}, false);
id('watch').addEventListener('click', function() {
posHandler.wid = geo.watchPosition(
posHandler.handleEvent,
errorHandler.handleEvent
);
}, false);
id('stop').addEventListener('click', function() {
if(posHandler.wid>-1) {
geo.clearWatch(posHandler.wid);
}
}, false);
id('map').addEventListener('click', function() {
geo.getCurrentPosition(function(pos) {
var content = "Your current position.";
var infowindow = new google.maps.InfoWindow();
var initLoc = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
map.setCenter(initLoc);
infowindow.setContent(content);
infowindow.setPosition(initLoc);
infowindow.open(map);
},
errorHandler.handleEvent
);
}, false);
})(window);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment