Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Geolocation Detection in browser with Javascript snippet.
var success = function(locationData){
console.log("locationData object", locationData);
},
error = function(err){
console.log(err);
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error, 10000);
} else {
error('not supported');
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grateful WebBase</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!--CDN -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<!--head script-->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
</head>
<body>
<h1>Grateful WebBase</h1>
<div id="map-canvas"></div>
<!--let browser UI thread complete the run JS-->
<script serc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript">
var geocoder;
function initialize(locationReceived) {
//Init geolocation
var myLatlng = new google.maps.LatLng(locationReceived.coords.latitude, locationReceived.coords.longitude);
//init geocoder
geocoder = new google.maps.Geocoder();
console.log(locationReceived);
var mapOptions = {
center: myLatlng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.setTilt(45);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
var success = function(locationData){
console.log("locationData object", locationData);
google.maps.event.addDomListener(window, 'load', initialize(locationData));
},
error = function(err){
console.log(err);
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error, 10000);
} else {
error('not supported');
}
function codeAddress() {
var address = "King's Beach Bowl";
geocoder.geocode( { 'address': address}, function(results, status) {
console.log(address);
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
codeAddress();
</script>
</body>
</html>
/*
* Google Maps Marker
*/
//reminder to init the showMarkers function.
var googleProcessedMarkerArray;
showMarkers: function (markers) {
for (var i in markers){
marker = new google.maps.Marker({
map: XXXXXXXXXXXX,
position: XXXXXXXXXXXX,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
googleProcessedMarkerArray.push(marker);
locationDetailsWindow = new LocatorInfoBox({
map: XXXXXXXXXXXX,
markerID: XXXXXXXXXXXX,
latlng: XXXXXXXXXXXX,
});
/*
* Map Events To Marker
*/
google.maps.event.addListener(marker, "click", function() {
console.log("clicked");
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment