Last active
August 6, 2021 11:07
-
-
Save bingeboy/5519841 to your computer and use it in GitHub Desktop.
Geolocation Detection in browser with Javascript snippet.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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