전공공부

uikyo93.egloos.com
포토로그

광고2

PHP, JavaScript] 구글맵 API를 이용하여 나만의 사이트 만들기 by uikyo93

최종 결과물

기능
1. 기본 마커가 아닌 사용자가 원하는 마커를 넣기
2. 자신의 현재 위치를 지도상에 표시
3. 주변가게 조회





데이터 베이스 저장 예시

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
//find_store.php 일부코드

<div id="map" style="height: 600px"></div>
 <div id="legend"></div>
            <script>
                var my_lat;
                var my_lon; 
                var map;
                var infoWindow;
                function onLoad() {
                    initMap();
                }
 
                function initMap() {
                    map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 14,
                    });
                    infoWindow = new google.maps.InfoWindow;
                    
// 현재위치 찾는 함수
                    if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                            var pos = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            };
                            my_lat = pos.lat;
                            my_lon = pos.lng;
                            infoWindow.setPosition(pos);
                            infoWindow.setContent('Location found.');
                            map.setCenter(pos);
                                                 
                           
                     var marker = new google.maps.Marker({
                                map: map,
                                position: pos,
                            });
  // 가게데이터를 가져오는 함수 호출 부분
                        getData();
                    
                    }, function() {
                            handleLocationError(true, infoWindow, map.getCenter());
                        });
                    } else {
                        handleLocationError(false, infoWindow, map.getCenter());
                    }
                }
 
 
                function handleLocationError(browserHasGeolocation, infoWindow, pos) {
                    infoWindow.setPosition(pos);
                    infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
                }
 
                function downloadUrl(url, callback) {
                    var request = window.ActiveXObject ?
                        new ActiveXObject('Microsoft.XMLHTTP') :
                        new XMLHttpRequest;
                    request.onreadystatechange = function() {
                        if (request.readyState == 4) {
                            request.onreadystatechange = doNothing;
                            callback(request, request.status);
                        }
                    };
                    request.open('GET', url, true);
                    request.send(null);
                }
                
                function getData() {
                    // 해당 url을 이용하여 콜백되는 데이터를 가져옴
                     var useurl = 'http://localhost/store/make_marker.php?what=<?php echo $_GET['what'] ?>&lat='+ my_lat +'&lon='+my_lon +'&name=<?php echo $_GET['name'] ?>&radio=<?php echo $_GET['radio'] ?>';
                        
                    downloadUrl(useurl, function(data) {
                        var legend = document.getElementById('legend');
                        
                        var xml = data.responseXML;
                        var markers = xml.documentElement.getElementsByTagName('marker');
                        Array.prototype.forEach.call(markers, function(markerElem) {
                            var name = markerElem.getAttribute('name');
                            var address = markerElem.getAttribute('address');
                            var type = markerElem.getAttribute('type');
                            var point = new google.maps.LatLng(
                                parseFloat(markerElem.getAttribute('lat')),
                                parseFloat(markerElem.getAttribute('lng')));
 
                            var phone = markerElem.getAttribute('phone');
                            var website = markerElem.getAttribute('website');
                            var img = markerElem.getAttribute('img');
 
                            var infowincontent = document.createElement('div');
                            var infoimg = document.createElement('IMG');
                            infoimg.src = img;
                            infoimg.height = "250";
                            var strong = document.createElement('strong');
                            infowincontent.style.textAlign = "left";
                            infowincontent.appendChild(infoimg);
 
                            infowincontent.appendChild(document.createElement('th'));
                            strong.textContent = "가게이름 : " + name
                            infowincontent.appendChild(strong);
 
                            infowincontent.appendChild(document.createElement('th'));
 
                            var text = document.createElement('strong');
                            text.textContent = "상세주소 : " + address
                            infowincontent.appendChild(text);
 
                            infowincontent.appendChild(document.createElement('th'));
 
                            var text2 = document.createElement('strong');
                            text2.textContent = "연락처 : " + phone
                            infowincontent.appendChild(text2);
 
                            infowincontent.appendChild(document.createElement('th'));
 
                            var text3 = document.createElement('strong');
                            text3.textContent = "웹사이트 : " + website
                            infowincontent.appendChild(text3);
                            
                    infowincontent.appendChild(document.createElement('th'));
 
                            var a = document.createElement('a');
                            var linkText = document.createTextNode("상세정보보기");
                            a.appendChild(linkText);
                            a.title = "상세정보보기";
                            a.href = "http://localhost/store/info_store.php?phone=" + phone;
                            infowincontent.appendChild(a);
                                
                         
                            var div2 = document.createElement('div');
                            div2.innerHTML = '<a href="' + a + '"><h5>' + name + '</h5></a>';
                            legend.style.textAlign = "left";
 
                            legend.appendChild(div2);
                            
                            var icon = markerElem.getAttribute('icon');
                            var marker = new google.maps.Marker({
                                map: map,
                                position: point,
                                icon: icon
                            });
                            marker.addListener('click', function() {
                                infoWindow.setContent(infowincontent);
                                infoWindow.open(map, marker);
                            });
                        });
                    });
                    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
 
      }
                
            function doNothing() {}
                       
                
            </script>
            <script async defer src="구글맵API키">
            </script>
                       
  
            <form method="get">
                <label class="control-label" for="sm"><input type="text" class="form-control" name="name">
                <div class="check" align="center">
                <input type="radio"  name="radio" id="name_search" checked="checked" value="name_search" > 이름
                <input type="radio"  name="radio" id="tag_search" value="tag_search"> 태그
                </div>
                <a href="/store/find_store.php?name=<?php echo $name; ?>&type=<?php echo $radio; ?>"><button class="btn btn-primary"><span class="fa fa-search"></span> 검색</button> </a>             
                </label>
            </form>
    
            <a href="/store/find_store.php?what=2" class="btn btn-warning"><span class="fa fa-search"></span> 주변가게</a> 
         
cs




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
// make_marker.php 사용자가 요청한 데이터를 XML형식으로 반환

<?php
include "./config/dbconn.php";
 
mysql_query("set names utf8");
 
$what = $_GET['what'];
 
$my_lat = $_GET['lat'];
$my_lon = $_GET['lon'];
 
$name = $_GET['name'];
$radio = $_GET['radio'];
 
 
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}
// Select all the rows in the markers table
 
 
 
 
if($what == 1) {
    $query = "SELECT * FROM store WHERE 1";    
} else if ($what == 2) {
// 주변 가게 조회시 사용
    $query = "SELECT *, ( 6371 * acos( cos( radians(".$my_lat.") ) * cos( radians( s_lat ) ) * cos( radians( s_lon ) - radians(".$my_lon."3) ) + sin( radians(".$my_lat.") ) * sin( radians(  s_lat  ) ) ) ) AS distance  FROM store HAVING distance < 10 ORDER BY distance LIMIT 0 , 10";    
} else if ($what != 1 && $name == "") {
    $query = "SELECT * FROM store WHERE s_kind='$what'";    
} else if ($radio == "name_search") {
    $query = "SELECT * FROM store WHERE s_name LIKE '%$name%'";    
} else if ($radio == "tag_search") {
    $query = "SELECT * FROM store WHERE s_tag LIKE '%$name%'";    
}
 
    $result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}
 
header("Content-type: text/xml");
 
// Start XML file, echo parent node
echo '<markers>';
 
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'name="' . parseToXML($row['s_name']) . '" ';
  echo 'address="' . parseToXML($row['s_address']) . '" ';
  echo 'lat="' . $row['s_lat'] . '" ';
  echo 'lng="' . $row['s_lon'] . '" ';
  echo 'type="' . $row['s_kind'] . '" ';
  echo 'icon="' . $row['s_icon'] . '" ';
  echo 'phone="' . $row['s_phone'] . '" ';
  echo 'website="' . $row['s_website_url'] . '" ';
  echo 'img="' . $row['s_image_url'] . '" ';
  echo '/>';
 
}
 
// End XML file
echo '</markers>';
?>
cs



태그 : , , , , , ,

포스트 메타 정보

퍼블리싱 및 추천

같은 카테고리의 글

트랙백(0) 덧글(0)

덧글

댓글 입력 영역

카테고리

구글 광고2

태그

태그 전체보기

달력

이전달 2023년 06월 다음달
2023년 06월
S M T W T F S
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

프로필

by uikyo93
IOT, Arduino, Raspberry, JSP, PHP E-MAIL : totokmk@gmail.com

통계 위젯 (화이트)

00
1
191091

광고

uikyo93.egloos.com is powered by Egloos. Subscribe to RSS. Skin designed by uikyo93.