Status bar in google map -
i want make status bar in top of map this: http://gmaps-samples-v3.googlecode.com/svn/trunk/geolocate/geolocate.html can show me how that, thanks.
<!doctype xhtml public "-//w3c//dtd xhtml 4.01//en"> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>where i?</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="geometa.js"></script> <style type="text/css"> *, html { margin:0; padding:0 } div#map_canvas { width:100%; height:100%; } div#info { width:100%; position:absolute; overflow:hidden; text-align:center; top:0; left:0; } .lightbox { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; background-color:white; padding:2px; } </style> <script type="text/javascript"> var map; function initialise() { var latlng = new google.maps.latlng(-25.363882,131.044922); var myoptions = { zoom: 4, center: latlng, maptypeid: google.maps.maptypeid.terrain, disabledefaultui: true } map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); preparegeolocation(); dogeolocation(); } function dogeolocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(positionsuccess, positionerror); } else { positionerror(-1); } } function positionerror(err) { var msg; switch(err.code) { case err.unknown_error: msg = "unable find location"; break; case err.permission_denined: msg = "permission denied in finding location"; break; case err.position_unavailable: msg = "your location unknown"; break; case err.break: msg = "attempt find location took long"; break; default: msg = "location detection not supported in browser"; } document.getelementbyid('info').innerhtml = msg; } function positionsuccess(position) { // centre map on new location var coords = position.coords || position.coordinate || position; var latlng = new google.maps.latlng(coords.latitude, coords.longitude); map.setcenter(latlng); map.setzoom(12); var marker = new google.maps.marker({ map: map, position: latlng, title: 'why, there are!' }); document.getelementbyid('info').innerhtml = 'looking <b>' + coords.latitude + ', ' + coords.longitude + '</b>...'; // , reverse geocode. (new google.maps.geocoder()).geocode({latlng: latlng}, function(resp) { var place = "you're around here somewhere!"; if (resp[0]) { var bits = []; (var = 0, = resp[0].address_components.length; < i; ++i) { var component = resp[0].address_components[i]; if (contains(component.types, 'political')) { bits.push('<b>' + component.long_name + '</b>'); } } if (bits.length) { place = bits.join(' > '); } marker.settitle(resp[0].formatted_address); } document.getelementbyid('info').innerhtml = place; }); } function contains(array, item) { (var = 0, = array.length; < i; ++i) { if (array[i] == item) return true; } return false; } </script> </head> <body onload="initialise()"> <div id="map_canvas"></div> <div id="info" class="lightbox">detecting location...</div> </body> </html>
Comments
Post a Comment