Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google maps sample
<!DOCTYPE html>
<html>
<head>
<title>Map Your Location</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
#map_canvas {
height: 85%;
width: 100%;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<div id="locationinfo"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Determine support for Geolocation
if (navigator.geolocation) {
// Locate position
navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
} else {
alert('Geolocation is not enabled in your browser.');
}
// Success callback function
function displayPosition(pos) {
var mylat = pos.coords.latitude;
var mylong = pos.coords.longitude;
var locDiv = document.getElementById('locationinfo');
locDiv.innerHTML = '<p>Your longitude is :' +
mylong + ' and your latitude is ' + mylat + '</p>';
//Load Google Map
var latlng = new google.maps.LatLng(mylat, mylong);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//Add marker
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "You are here"
});
}
// Error callback function
function errorFunction(pos) {
alert('Oops!');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment