<html>
<head>
<title>HTML5 geolocation example</title>
<script>
function googleMapIt(p)
{
var detail ='<b>Latitude: </b> ' + p.coords.latitude + ' <b> Longitude: </b> ' + p.coords.longitude;
document.getElementById("addAfterLoad").innerHTML = detail;
var map='http://maps.google.com/maps?&z=15&output=embed&ll='+p.coords.latitude+','+p.coords.longitude;
document.getElementById("geoMap").src=map;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(googleMapIt);
}
else {
var detail ='<b>Your browser does not support geolocation!</b>';
document.getElementById("addAfterLoad").innerHTML = detail;
}
</script>
</head>
<body>
<p>
<center>
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><iframe id="geoMap" width="187" height="258" frameborder="0" scrolling="no" src=""></iframe></td>
</tr>
</table>
<span id="addAfterLoad"></span>
</center>
</body>
</html>
<!--원본
<html>
<head>
<title>HTML5 geolocation example</title>
<script>
function googleMapIt(p)
{
var detail ='<b>Latitude: </b> ' + p.coords.latitude + ' <b> Longitude: </b> ' + p.coords.longitude;
document.getElementById("addAfterLoad").innerHTML = detail;
var map='http://maps.google.com/maps?&z=15&output=embed&ll='+p.coords.latitude+','+p.coords.longitude;
document.getElementById("geoMap").src=map;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(googleMapIt);
}
else {
var detail ='<b>Your browser does not support geolocation!</b>';
document.getElementById("addAfterLoad").innerHTML = detail;
}
</script>
</head>
<body>
<p>
<center>
<p>
<table cellspacing='0' cellpadding='0'>
<tr>
<td width='187' colspan='3'>
<img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/phone_top.jpg">
<td>
</tr>
<tr>
<td>
<img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/p_left.jpg">
</td>
<td width='187' background="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/phone_center.jpg">
<iframe id="geoMap" width="187" height="258" frameborder="0" scrolling="no" src=""></iframe>
</td>
<td>
<img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/p_right.jpg">
</td>
</tr>
<tr>
<td width='187' colspan='3'>
<img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/phone_bottom.jpg">
<td>
</tr>
</table>
<br>
<span id="addAfterLoad"></span>
<br>
<p>To learn more about the HTML5 geolocation specification check out the <a href="http://dev.w3.org/geo/api/spec-source.html">WC3 API Specification</a> draft.
</center>
</body>
</html>
-->
'모바일웹' 카테고리의 다른 글
| ★ html5 모바일웹 ★ HTML5를 사용하여 모바일 장치 웹 애플리케이션 작성하기 (0) | 2011.05.10 |
|---|---|
| ★ html5 모바일웹 ★ HTML5 문서구조와 새로운 요소들 (0) | 2011.05.10 |
| ★ html5 모바일웹 ★ 2010년 7월 6일 KIPFA 뉴스레터 (0) | 2011.05.10 |
| ★ html5 모바일웹 ★ 2010년 9월 7일 KIPFA 뉴스레터 (0) | 2011.05.10 |
| ★ html5 모바일웹 ★ 2010년 9월 17일 KIPFA 뉴스레터 (0) | 2011.05.10 |
