-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
84 lines (60 loc) · 2.2 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"> <!-- A call to the Google Map API-->
</script>
<script>
var lat; <!--The Latitude degree-->
var lng; <!--The Longitude degree-->
var myCenter=new google.maps.LatLng(lat, lng); <!--Creates a variable that makes a map with the Lat Long above-->
var map;
var marker;
function initialize() { <!--The function that runs when the HTML is first run-->
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
lat=position.coords.latitude();
lng=position.coords.longitude();
var mapProp = { <!--The peramiters that define what the map is like. For example, here it centers the map to the lat long above, it has a zoom of 10, and is a roadmap-->
center:myCenter,
zoom:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
marker=new google.maps.Marker({ <!--Sets a marker at the lat long above-->
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
function move_right() <!--When the map is clicked, the marker moves by 0, 0.05 and it says "The marker has been moved"-->
{
lng = lng +0.05
marker.setPosition( new google.maps.LatLng( lat, lng ) );
alert("The marker has been moved")
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var x = document.getElementById("demo");
alert("Hello"+x);
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;" onclick=move_right()></div> <!--This sets the size of the map. It also states that when it is clicked it runs the function that moves it to the right-->
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo">Hello</p>
</body>
</html>