1. 구글 지도 API로 가까운 매장 찾기 구현

이하 웹페이지 소스 일부. 뭐 내가 짠게 우왕 굿은 아니지만..

이래저래 잘 활용해 보시길...

script에 Google API 키 발급받아서 넣는거 잊지 말길...

var curPos = null;
var directionsDisplay = null;
var directionsService = null;
var storeList = new Array();
var findStoreFlag = false;
storeList[0] = {lat: 37.5707940, lng: 126.9710600};
storeList[1] = {lat: 37.5704049, lng: 126.9722485};
storeList[2] = {lat: 37.5060580, lng: 127.0033890};
storeList[3] = {lat: 37.4843585, lng: 126.9022739};
storeList[4] = {lat: 37.6505030, lng: 127.0619600};
storeList[5] = {lat: 37.3850110, lng: 127.1206630};
storeList[6] = {lat: 37.5544795, lng: 126.9366329};
storeList[7] = {lat: 37.6677905, lng: 126.7646956};
storeList[8] = {lat: 37.7525750, lng: 127.0690960};
function initMap() { 
 var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 14,
  center: storeList[0]
 });
 directionsDisplay = new google.maps.DirectionsRenderer;
 directionsService = new google.maps.DirectionsService; 
 directionsDisplay.setMap(map); 
 getLocation();
}

function getLocation() {  //위치 조회시작..

 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition,showError);
 } else {
  alert("Geolocation is not supported by this browser.");
  var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 14,
   center: storeList[0]
  });
 }
}

function fnSetCurLoc(position){ // 현재 위치를 저장
 curPos = {
  lat: position.coords.latitude,
  lng: position.coords.longitude
 };
}

function showPosition(position) { 
 curPos = {
  lat: position.coords.latitude,
  lng: position.coords.longitude
 };
 alert(curPos);
 fnFindStore();//가까운 위치 미리 찾기...
 directionsService.route({
   origin:curPos,  // Haight.
   destination: storeList[document.getElementById('selStore').value],
   travelMode: google.maps.TravelMode.TRANSIT,
   unitSystem: google.maps.UnitSystem.METRIC,
   avoidHighways: false,
   avoidTolls: false
  }, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
   directionsDisplay.setDirections(response);
  } else {
   window.alert('Directions request failed due to ' + status);
  }
 });
}


var minDistance = 10000000;
var minDistInx = 0;
function fnFindStore(){
 if(!findStoreFlag){  //한번만 찾게 flag로 조정
  $.ajaxSetup({
   async: false
  });
 
  for(listCnt = 0 ; listCnt < storeList.length ; listCnt ++){
   var callUrl = "/api/google/retDistance.asp";
   var sendParams = {  
    origins : curPos.lat + "," + curPos.lng, 
    destinations : storeList[listCnt].lat + "," + storeList[listCnt].lng
   };
   console.log(listCnt);
   $.getJSON( callUrl, sendParams ).done(function( data ) {
    console.log( "JSON Data: " + data.rows[0].elements[0].distance.value + ":::" + listCnt + ":::" + minDistInx + "::::" + minDistance);
    if(minDistance > data.rows[0].elements[0].distance.value){    //최소 거리를 계산해서 저장...
     minDistance = data.rows[0].elements[0].distance.value;
     minDistInx = listCnt;
     console.log(minDistance);
     console.log(listCnt);
    }   
   }).fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
   });
  }
  
  if(!findStoreFlag) findStoreFlag = true;
 }
}

function fnSetStore(){
 console.log(minDistance);
 console.log(minDistInx);
 document.getElementById('selStore').value = minDistInx;
 directionsService.route({
   origin:curPos,  // Haight.
   destination: storeList[minDistInx],
   travelMode: google.maps.TravelMode.TRANSIT,
   unitSystem: google.maps.UnitSystem.METRIC,
   avoidHighways: false,
   avoidTolls: false
  }, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
   directionsDisplay.setDirections(response);
  } else {
   window.alert('Directions request failed due to ' + status);
  }
 });
}

function showError(error){
 switch (error.code){
  case error.PERMISSION_DENIED:
   alert("User denied the request for Geolocation.");
   break;
  case error.POSITION_UNAVAILABLE:
   alert("Location information is unavailable.");
   break;
  case error.TIMEOUT:
   alert("The request to get user location timed out.");
   break;
  case error.UNKNOWN_ERROR:
   alert("An unknown error occurred.");
   break;
 }
}