Maps API v3 지오 코딩

Question

바로 말하자면 : JSON을 통해 가져온 맞춤 마커가있는 gmap을 작성하고 있습니다. 또한 검색 기능을 제공해야합니다. 입력 된 우편 번호 (AU)에 가장 가까운 마커.

마커 표시 (및 배열의 ​​다른 데이터)는 정상적으로 작동하며,이 두 번째 부분은 내 엉덩이를 걷어 차 있습니다. 나는 JS와 위대하지 않다. 현재 내가하려는 것은 입력 된 우편 번호의 위도와 경도를 반환하는 것입니다. 누군가가 나를 전체 기능을 수행하는 방법을 보여줄 수 있다면 좋을 것입니다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니까? JS 및 마크 업과 관련하여 도움을 주셔서 감사드립니다.

자바 스크립트 :

function initialize() { 
    /* Map setup */ 
    var latlng = new google.maps.LatLng(XXX, XXX); 
    var mapOptions = { 
    center: latlng, 
    zoom: 16, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    /* Map initialise */ 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
    mapOptions); 

    /* set iconpath */ 
    var iconBase = '/path-to-icons'; 

    /* create a separate shadow icon */ 
    var markerShadow = { 
    url: iconBase + 'icon_map-shadow.png', 
    anchor: new google.maps.Point(15, 25) 
    }; 

    /* Get JSON */ 
    jQuery.getJSON('/path-to/markers.json', function (mapdata) { 
     $.each(mapdata, function (key, data) { 
     var latlng = new google.maps.LatLng(data.lat, data.lng); 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: iconBase + 'icon_map.png', 
      shadow: markerShadow, 
      address: data.address, 
      subaddress: data.subaddress, 
      title: data.title 
     }); 
     /* For the showing of the details */ 
     // TODO : MAKE THIS NEATER 
     google.maps.event.addListener(marker, 'click', function() { 
      $("#map-details .inner").hide(); 
      $("#map-details .inner span").html(""); 
      $("#map-details .inner .neareststore").html(marker.title); 
      $("#map-details .inner .address").html(marker.address); 
      $("#map-details .inner .sub-address").html(marker.subaddress); 
      $("#map-details .inner").fadeIn(200); 
     }); 
    }); 
    }); 
}; 
google.maps.event.addDomListener(window, 'load', initialize); 

function geocode() { 
    $("#search").submit(function(e){ 
    e.preventDefault(); 
    var currentloc = $("#postcode").val(); 
    var url = "http://maps.googleapis.com/maps/api/geocode/json?address="+currentloc+"+AU&sensor=false"; 
    $.getJSON(url, function(data) { 
     //JSON function 
    }); 
    }; 
}; 

기본 양식 HTML :

<form action="" method="post" id="search"> 
    <fieldset> 
    <input name="postcode" id="postcode"> 
    <input type="submit" id="postcodesearch" value="search"> 
    </fieldset> 
</form> 

* EDIT * - 아직 내 자신의 질문에 대답 할 수 없습니다 답변 만이 여기에 링크 된 Haversine 수식을 사용하여 이것을 해결했습니다 : Google Maps Api v3 - find nearest markers

약간의 정리가 필요하지만 이것은 후손을위한 것입니다. 모두에게 도움을 주셔서 감사합니다.

function rad(x) {return x*Math.PI/180;} 
function find_closest_marker(_lat , _lng ) { 

    var lat = _lat; 
    var lng = _lng; 
    var R = 6371; // radius of earth in km 
    var distances = []; 
    var closest = -1; 
    for(i=0;i<map.markers.length; i++) { 
     var mlat = map.markers[i].position.lat(); 
     var mlng = map.markers[i].position.lng(); 
     var dLat = rad(mlat - lat); 
     var dLong = rad(mlng - lng); 
     var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
      Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2); 
     var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
     var d = R * c; 
     distances[i] = d; 
     if (closest == -1 || d < distances[closest]) { 
      closest = i; 
     } 
    } 
    var closest = map.markers[closest]; 

    map.setCenter(closest.getPosition()); 
    $("#map-details .inner").hide(); 
    $("#map-details .inner span").html(""); 
    $("#map-details .inner .neareststore").html(closest.title); 
    $("#map-details .inner .address").html(closest.address); 
    $("#map-details .inner .sub-address").html(closest.subaddress); 
    $("#map-details .inner").fadeIn(200); 
} 

$(document).ready(function(){ 
    $("#search").submit(function(e){ 
     e.preventDefault(); 
     var currentloc = $("#postcode").val(); 
     var url   = "http://maps.googleapis.com/maps/api/geocode/json?address="+currentloc+"+AU&sensor=false"; 
     $.getJSON(url, function(data) { 

     var lat = data.results[0].geometry.location.lat; 
     var lng = data.results[0].geometry.location.lng; 
     find_closest_marker(lat,lng) 
     }); 
    }); 
}); 

Answer 1

두 번째 줄부터 마지막 ​​줄까지 구문 오류가 있습니다. 그것은이 있어야한다 }); 대신

};이어야합니다 :

function geocode() { 
    $("#search").submit(function(e){ 
    e.preventDefault(); 
    var currentloc = $("#postcode").val(); 
    var url = "http://maps.googleapis.com/maps/api/geocode/jsonaddress="+currentloc+"+AU&sensor=false"; 
    $.getJSON(url, function(data) { 
     //JSON function 
    }); 
    }); 
}; 

나는 구문 오류를 확인하기 위해 http://www.dirtymarkup.com/을 사용했다. 정말 유용합니다.

그리고 https://developers.google.com/maps/documentation/geocoding/#JSON에서 JSON 출력 형식을 알려줍니다. 그래서, 위도/경도를 얻기 위해, 다음을 사용 :

data.results.geometry.location.lat 및 data.results.geometry.location.lng