Skip to content

Instantly share code, notes, and snippets.

@prashanta

prashanta/index.html

Last active August 2, 2016 03:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save prashanta/4147418 to your computer and use it in GitHub Desktop.
Save prashanta/4147418 to your computer and use it in GitHub Desktop.
Download ZIP
Show User Location
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas {
position: absolute;
width: 100%;
top: 60px;
bottom: 0px;
box-shadow: 0px 0px 21px rgba(0,0,0,0.3);
}
.titlepage{
position: relative;
display: block;
font-size: 28px;
font-family: Helvetica, Arial;
height: 45px;
margin-top: 10px;
color: #AAA;
letter-spacing: -1px;
line-height: 45px;
text-shadow: 1px 1px 1px #FFF;
text-align: center;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
var x = location.coords.latitude;
var y = location.coords.longitude;
var myOptions = {
center: new google.maps.LatLng(x, y),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var pinkParksStyles = [ {featureType: "all", stylers: [{ hue: "#22FFAF" }, { saturation: 1 }]},{featureType: "poi.park", stylers: [ { hue: "#ff0023" },{ saturation: 40 }]},{featureType: "water", stylers: [ { hue: "#00AAFF"}]},{featureType: "road.highway", stylers: [ { hue: "#000000"}]},{featureType: "road.local", stylers: [ { hue: "#0FF000"}]}];
map.setOptions({styles: pinkParksStyles});
var myLatlng = new google.maps.LatLng(x,y);
var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Here you are."});
}
}
</script>
</head>
<body onload="initialize()">
<div class="titlepage">Where you at?</div>
<div id="map_canvas"></div>
</body>
</html>
@prashanta
Copy link
Author

prashanta commented Dec 18, 2012 •
edited

View output here: https://bl.ocks.org/4147418

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment