프로그래밍/JavaScipt

javascript google map api 반경내 업체 표시하기

p-a-r-k 2017. 7. 17. 17:48
반응형

1. include script 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY"></script> <script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script>

2. 로드시 geolocation 호출 / navigator.geolocation.getCurrentPosition

$(window).on("load", function(){
	navigator.geolocation.getCurrentPosition(
		fninitLoadMap, fnGpsNone, {maximumAge:10000, timeout:5000, enableHighAccuracy:true}
	);
	//성공시함수, 실패시함수, ...{세팅해주면 모바일에서 좋음ㅋ}
});

3. 실패시 함수는 알림창띄우고, 성공시 ajax사용함

* 상단에서 서버언어로 가져와도 무방.

function fninitLoadMap(position){
	//position값 받아서 사용
	var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	var myOptions = { 
		zoom: 16, 
		center:latlng, 
		mapTypeId: google.maps.MapTypeId.ROADMAP 
	}; 

	$.ajax({
		type: "POST",
		url: "/GetNearStore.php",
		async: false,
		data:{
			//나의 위치를 넘겨주어 넘겨준 좌표로 반경내 계산후 리스트가져옴
			LAT:position.coords.latitude,
			LNG:position.coords.longitude
		},
		dataType: "json",
		success: function(jdata) {
			markers = jdata;
			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
	
			var div = document.getElementById("marker");
			mymarker = new RichMarker({
				map: map,
				position: map.getCenter(),
				draggable: false,
				flat: true,
				anchor: RichMarkerPosition.MIDDLE,
				content: div
			});
			  
			// 마커 생성 
			for (index in markers) addMarker(markers[index]); 

			function addMarker(data) { 
				var marker = new google.maps.Marker({ 
					position: new google.maps.LatLng(data.lat, data.lng), 
					map: map, 
					title: data.name 
				}); 

				var contentString = data.info; 
				var infowindow = new google.maps.InfoWindow({ content: contentString}); 
				google.maps.event.addListener(marker, "click", function() { 
					infowindow.open(map,marker); 
				}); 
			}
			
			//조회성공
		}, error:function(xhr){
			console.log(xhr.responseText);
			return;
		}
	});
} 

4. 서버처리(업체마다 좌표값 세팅되어있음.)

$getLat = trim($_POST['LAT']);
$getLng = trim($_POST['LNG']);

$getLat			= quote_smart($getLat);
$getLng			= quote_smart($getLng);

$query = "SELECT A.REG_NO, A.M_ZIP, A.M_ADDR, A.M_ADDR_D, A.M_TEL, 
			 B.STORE_NAME, B.STORE_TXT, B.STORE_IMG, B.STORE_LAT, B.STORE_LNG,
			 (3959 * acos( cos( radians($getLat) ) * cos( radians( B.STORE_LAT ) ) * 
			 cos( radians( B.STORE_LNG ) - radians($getLng) ) + sin( radians($getLat) ) * sin( radians( B.STORE_LAT ) ) ) ) AS distance
			 FROM MEMBER_INFO A LEFT JOIN STORE_INFO B
			 ON A.REG_NO = B.M_REG_NO
			 WHERE A.DEL_YN = 'N'
			 HAVING distance <= 1
			 ORDER BY A.REG_NO";

//distance <= 1 부분이 1km이내 조건문

$result = mysql_query($query);

$return_array = array();

while ($data = mysql_fetch_array($result)){
	$row_array['rno'] = $data['REG_NO'];
	$row_array['lat'] = $data['STORE_LAT'];
	$row_array['lng'] = $data['STORE_LNG'];
	$row_array['info'] = ''.$data['STORE_NAME'].'
업체바로가기'; array_push($return_array, $row_array); } echo json_encode($return_array);

결과




반응형