javascript - Maps API v3 geocoding -
straight point: i'm building gmap custom markers pulled via json. need provide search functionality; nearest marker inputted postcode (au).
marker display (and other data array) works fine, it's second part has ass kicked. i'm not great js. @ moment i'm trying return lat , long of inputted postcode, though if can show me how perform whole function, great. can point me in right direction? js , markup below, , in advance assistance.
javascript:
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 separate shadow icon */ var markershadow = { url: iconbase + 'icon_map-shadow.png', anchor: new google.maps.point(15, 25) }; /* 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 }); /* showing of details */ // todo : make 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 }); }; }; basic form html:
<form action="" method="post" id="search"> <fieldset> <input name="postcode" id="postcode"> <input type="submit" id="postcodesearch" value="search"> </fieldset> </form> * edit * - answered can't answer own question yet, have solved using haversine formula linked here: google maps api v3 - find nearest markers
it needs tidying gist, here posterity. assistance all.
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 = 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) }); }); });
your second-to-last line has syntax error; should }); instead of };
it should this:
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 }); }); }; i used http://www.dirtymarkup.com/ check syntax errors. it's useful.
and, https://developers.google.com/maps/documentation/geocoding/#json, tells json output format. so, lat/long, use:
data.results.geometry.location.lat , data.results.geometry.location.lng
Comments
Post a Comment