NBN Map
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>KML Layers</title> <!--<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">--> <script src="https://maps.googleapis.com/maps/api/js?v=3.12&key=AIzaSyAYxKPrqC3_jnpXoXTrrnJ_fD8PjvicAOw&sensor=false&libraries=geometry,places"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://server.ktsang.tk/assets/js/maps.google.polygon.containsLatLng.js"></script> <script> var geocoder; var polygons = []; geocoder = new google.maps.Geocoder(); $.get("/local--code/nbn-map-static/1", function(data){ $.each(data.boundaries, function(index, value){ var paths = []; $.each(value.encodedPolygons, function(i, polygon){ $.each(polygon, function(i, path){ paths.push(google.maps.geometry.encoding.decodePath(path)); }); }); var polygon = new google.maps.Polygon({ paths: paths }); polygons.push([polygon,value]); }); }, "json"); function checkAddress() { var address = document.getElementById('address').value; var found = false; var foundData = {}; geocoder.geocode( { 'address': address, "region": "AU"}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { $.each(polygons, function(index, polygon){ if(!found){ if(polygon[0].containsLatLng(results[0].geometry.location)){ foundData = { nbn: polygon[1], gmaps: results[0] }; found = true; } } }); if(found){ console.log(foundData); alert("Your address has been found!"); } } else { alert('Geocode was not successful for the following reason: ' + status); } }); } var service; var placesServices; $(document).ready(function(){ var input = /** @type {HTMLInputElement} */(document.getElementById('address')); var autocomplete = new google.maps.places.Autocomplete(input, { types: ["geocode"], componentRestrictions: {country: "au"}}); //placesServices = new google.maps.places.PlacesService($("#data")[0]); }); /* function keyup_complete(self){ if(self.value.length<10){return;} service.getPlacePredictions({ input: self.value, types: ["geocode"], componentRestrictions: {country: "au"}}, function(d){ //console.log(d); $("#autocomplete").text(""); $.each(d, function(i,v){ $("#autocomplete").append(v.description+"<br />"); }); placesServices.getDetails({reference:d[0].reference}, function(a){console.log(a)}); }); } */ </script> </head> <body> <!--<div id="map-canvas"></div>--> <form action="javascript:;" onsubmit="checkAddress()"> <label>Address:</label> <input type="text" id="address" value="41 Honeyeater Terrace, South Morang VIC 3752, Australia" /> </form> <div id="data"> </div> <div id="autocomplete"> </div> </body> </html>
page revision: 25, last edited: 08 Jul 2013 12:28