김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김재현
e6b28ced 1 parent c459f34a

머지 진행

Inline Side-by-side
Showing 4 changed files with 134 additions and 58 deletions
......@@ -49,7 +49,7 @@ td {
color: #808080;
font-size: 8pt;
}
#map {
#map{
height: 400px;
width: 100%;
}
}
......
......@@ -3,6 +3,7 @@
<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 async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&libraries=places"></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"
......@@ -10,6 +11,134 @@
resultObject = new Array();
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()
//console.log(data)
resultObject.push(data);
});
var markers = resultObject.map(function(currentValue, index, array) {
var marker = new google.maps.Marker({
position: {lat: Number(currentValue.lat), lng: Number(currentValue.lng)},
title: currentValue.title,
});
marker.setMap(map);
});
}
}
});
}
}
});
}
$('.popup').click(function(e){
})
function initMap(latitude, longitude) {
var center = {lat: latitude, lng: longitude};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: center
});
var marker = new google.maps.Marker({
position: center,
map: map
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: center,
radius: 1000,
type: ['restaurant']
}, callback);
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var image1 = 'http://localhost:3000/images/restaurant_1.png'
var image2 = 'http://localhost:3000/images/restaurant_2.png'
var placeLoc = place.geometry.location;
var marker1 = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: image1
});
var marker2 = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: image2
});
marker2.setMap(null);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+place.name+'</h1>'+
'<div id="bodyContent">'+
'<p>주소: '+place.vicinity+'<br/>'+
'<a href="https://localhost:3000/id=297882194">'+
'표시하기</a> '+
'</p>'+
'</div>'+
'</div>';
google.maps.event.addListener(marker1, 'click', function(e) {
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
infowindow.open(map, this);
//marker1.setMap(null);
//marker2.setMap(map);
});
google.maps.event.addListener(marker2, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
infowindow.open(map, this);
});
}
}
$(document).ready(function() {
$('.sidenav').hide();
$('#show').click(function() {
......@@ -18,66 +147,14 @@
if("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
findShops(position.coords.latitude, position.coords.longitude);
//console.log(position.coords.latitude)
//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>
......@@ -94,8 +171,7 @@
<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 id="popup"></div>
</div>
<div id ="footer"></div>
......