This example demonstrates the use of HTML5 for geo-positioning . That is, you get the native IP address, and then you know where it is, and it's displayed on Google Maps ...
Instance
The instance preview address: Http://html5demos.com/geo
xml/html Code copy content to clipboard
- <! DOCTYPE HTML>
- <HTML lang="en" xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <Meta http-equiv= "content-type" content="text/html;charset=utf-8" />
- <Meta name= "viewport" content="width=620" />
- <title>html5 demo:geolocation</title>
- <style>
- Body {
- Font:normal 16px/20px Helvetica, Sans-serif;
- Background:rgb (237, 237, 236);
- margin:0;
- margin-top:40px;
- padding:0;
- }
- section, header, footer {
- Display:block;
- }
- #wrapper {
- width:600px;
- margin:0 Auto;
- Background: #fff URL (images/shade.jpg) repeat-x Center bottom;
- -moz-border-radius:10px;
- -webkit-border-radius:10px;
- border-top:1px solid #fff;
- padding-bottom:76px;
- }
- H1 {
- padding-top:10px;
- }
- H2 {
- font-size:100%;
- Font-style:italic;
- }
- Header, Article > *, footer > * {
- margin:20px;
- }
- Footer > * {
- margin:20px;
- Color: #999;
- }
- #status {
- padding:5px;
- Color: #fff;
- Background: #ccc;
- }
- #status. Fail {
- Background: #c00;
- }
- #status. Success {
- Background: #0c0;
- }
- </style>
- <script src="h5utils. JS"></script><script type=" Text/javascript " src=" Http://maps.google.com/maps/api/js?sensor=false "></script>
- </head>
- <body>
- < section id="wrapper">
- <header>
- <H1>geolocation</H1>
- </Header>
- <article>
- <p>finding your location: <span id="status">checking ... </span></P>
- </Article>
- <footer><a href=http://www.houoop.com/%3Cspan class="str"> "/ ">HTML5 demo</a></footer>
- </Section>
- <script>
- function success (position) {
- var s = document.queryselector (' #status ');
- if (s.classname = = ' success ') {
- Not sure why we ' re hitting this twice in FF, I think it's to does with a cached result coming back
- Return }
- s.innerhtml = "Found you!";
- s.classname = ' success ';
- var mapcanvas = document.createelement (' div ');
- mapcanvas.id = ' Mapcanvas ';
- mapcanvas.style.height = ' 400px ';
- mapcanvas.style.width = ' 100% ';
- Document.queryselector (' article '). appendchild (Mapcanvas);
- var latlng = new Google.maps.LatLng (Position.coords.latitude, position.coords.longitude);
- var myoptions = {
- Zoom:15, CENTER:LATLNG,
- Maptypecontrol:false,
- Navigationcontroloptions: {
- Style:google.maps.NavigationControlStyle.SMALL
- },
- MapTypeId:google.maps.MapTypeId.ROADMAP};
- var map = new Google.maps.Map (document.getElementById ("Mapcanvas"), myoptions);
- var marker = new Google.maps.Marker ({position:latlng, Map:map, title: "You Are here!"});
- }
- Function error (msg) {
- var s = document.queryselector (' #status ');
- s.innerhtml = typeof msg = = ' string '? Msg: "Failed";
- s.classname = ' fail ';
- Console.log (arguments);
- } if (navigator.geolocation) {
- Navigator.geolocation.getCurrentPosition (success, error);
- } else {
- Error (' not supported ');
- }
- </Script>
- </body>
- </html>
Share your location with HTML5
