map.ejs
4.03 KB
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
103
104
105
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
requestUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&startPage=1&MobileOS=ETC&MobileApp=openSource&arrange=A&contenTypeId=15&listYN=Y&radius=10000"
requestNumUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&MobileOS=ETC&MobileApp=AppTest&arrange=A&contenTypeId=15&radius=10000&listYN=N"
resultObject = new Array();
$(document).ready(function() {
$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
});
if("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
findShops(position.coords.latitude, position.coords.longitude);
initMap(position.coords.latitude, position.coords.longitude);
});
} else {
}
function findShops(latitude, longitude) {
//var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
pageIndex = 1;
var parameter = "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex;
$.ajax({
type: "GET"
,dataType: "xml"
,url: requestUrl + parameter
,success: function(xml){
totalCount = Number($(xml).find("totalCount").text());
for(pageIndex=1; pageIndex<=totalCount/10; pageIndex++)
{
$.ajax({
type: "GET"
,dataType: "xml"
,url: requestUrl + "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex
,success: function(xml){
var xmlData = $(xml).find("items item");
var listLength = xmlData.length;
if (listLength) {
$(xmlData).each(function(){
var data = new Object() ;
data.title = $(this).find("title").text()
data.lng = $(this).find("mapx").text()
data.lat = $(this).find("mapy").text()
resultObject.push(data);
});
}
}
});
}
}
});
}
});
function initMap(latitude, longitude) {
var position = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: position
});
var markers = resultObject.map(function(location, i) {
console.log(location)
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
}
</script>
</head>
<body>
<div id ="menu">
<div id ="show">clickmenu</div>
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
<div id = "header"> </div>
<div id ="content">
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&callback=initMap"></script>
</div>
<div id ="footer"></div>
</body>
</html>