-
Notifications
You must be signed in to change notification settings - Fork 0
/
Locationingrid.html
92 lines (61 loc) · 2.45 KB
/
Locationingrid.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
<!DOCTYPE html>
<html>
<body>
<div style="width:100%;height:100px;float:left;">
<h1>Getting Latitude & Longitude from Google Map</h1>
</div>
<center>
<h3>Click wherever you want to add a marker</h3>
</center>
<div id="map" style="width:60%;height:500px;float:left;"></div>
<div id="map" style="width:15%;height:500px;float:left;"></div>
<div id="map" style="width:25%;height:500px;float:left;">
<table id="loacationTable" border="1" cellspacing="2">
<tr>
<th>Location Number</th>
<th>Latitude</th>
<th>Longitute</th>
</tr>
</table>
</div>
<script>
var getLat;
var getLon;
var x = 1;
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(6.8210555, 80.0405499);
var mapOptions = { center: myCenter, zoom: 12 };
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(map, event.latLng);
});
google.maps.event.addListener(map, 'click', function (event) {
var table = document.getElementById("loacationTable");
var row = table.insertRow(x);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = event.latLng.lat();
cell3.innerHTML = event.latLng.lng();
cell1.innerHTML = x;
x++;
document.getElementById("x").innerHTML = x;
});
}
function placeMarker(map, location) {
var marker = new google.maps.Marker({
position: location,
map: map, animation: google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map, marker);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=(YOUR API KEY)&callback=myMap"></script>
<div style="width:100%;height:50px;float:left;">
</div>
</body>
</html>