-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgeolocation.html
102 lines (95 loc) · 3.74 KB
/
geolocation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- <script src="jquery-2.1.4.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
<div id="navbar"><span>Red Stapler - Geolocation API</span></div>
<div id="wrapper">
<button id="location-button">Get User Location</button>
<div id="output"></div>
</div>
<script>
var long = "";
var lat = "";
if (navigator.geolocation) { //check if geolocation is available
navigator.geolocation.getCurrentPosition(function(position){
console.log(position);
long = position.coords.longitude;
lat = position.coords.latitude;
window.alert(lat +" " +long);
});
}
let url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=${AIzaSyCycQ9f5ZlB6Q6CFmQlnhQZqCEoE8S_cq4}`;
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
let parts = data.results[0].address_components;
document.body.insertAdjacentHTML(
"beforeend",
`<p>Formatted: ${data.results[0].formatted_address}</p>`
);
parts.forEach(part => {
if (part.types.includes("country")) {
//we found "country" inside the data.results[0].address_components[x].types array
document.body.insertAdjacentHTML(
"beforeend",
`<p>COUNTRY: ${part.long_name}</p>`
);
}
if (part.types.includes("administrative_area_level_1")) {
document.body.insertAdjacentHTML(
"beforeend",
`<p>PROVINCE: ${part.long_name}</p>`
);
}
if (part.types.includes("administrative_area_level_3")) {
document.body.insertAdjacentHTML(
"beforeend",
`<p>LEVEL 3: ${part.long_name}</p>`
);
}
});
})
.catch(err => console.warn(err.message));
// function geocodeLatLng(geocoder, map, infowindow) {
// var input = document.getElementById('latlng').value;
// var latlngStr = input.split(',', 2);
// var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
// geocoder.geocode({'location': latlng}, function(results, status) {
// if (status === 'OK') {
// if (results[0]) {
// map.setZoom(11);
// var marker = new google.maps.Marker({
// position: latlng,
// map: map
// });
// infowindow.setContent(results[0].formatted_address);
// // infowindow.open(map, marker);
// } else {
// window.alert('No results found');
// }
// } else {
// window.alert('Geocoder failed due to: ' + status);
// }
// });
// }
// $('#location-button').click(function(){
// if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(function(position){
// console.log(position);
// $.get( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+ position.coords.latitude + "," + position.coords.longitude +"&sensor=false", function(data) {
// console.log(data);
// })
// var img = new Image();
// img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + position.coords.latitude + "," + position.coords.longitude + "&zoom=13&size=800x400&sensor=false";
// $('#output').html(img);
// });
//
// }
// });
</script>
</body>
</html>