How to pass location and radius in google map API? - google-maps

Question

My goal is to get list of zip codes by passing parameter of location and radius of particular limit.
I got only the location, but I couldn't get the radius of certain zipcode.
https://maps.googleapis.com/maps/api/elevation/json?locations=7034&key=YOUR_API_KEY
How can I get the list of zipcode in certain radius ?
Please guide me to solve this issue

Answer 1

You need a database that contains data about the zipcodes. Here is an example that uses a FusionTable containing US zip codes:
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcodeInRadius.html
code snippet:
google.load('visualization', '1', {
'packages': ['corechart', 'table', 'geomap']
});
var map;
var labels = [];
var layer;
var tableid = "1VFp4XJEdnR769R2CFRghlmDpUd15dQArpwzcBBs"; //1499916;
var circle;
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(37.23032838760389, -118.65234375),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
from: tableid,
select: "geometry"
}
});
// layer.setQuery("SELECT 'geometry' FROM " + tableid);
layer.setMap(map);
codeAddress();
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
if (results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
var latLng = results[0].geometry.location;
var radius = parseFloat(document.getElementById('radius').value) * 1609.34;
if (isNaN(radius)) radius = 5 * 1609.34; // default to 5 miles
displayZips(results[0].geometry.location, radius);
if (circle && circle.setMap) {
circle.setMap(null);
}
circle = new google.maps.Circle({
center: latLng,
radius: radius,
map: map
});
layer.setQuery({
select: 'geometry',
from: tableid,
where: "ST_INTERSECTS(geometry, CIRCLE(LATLNG(" + latLng.toUrlValue(6) + ")," + radius.toFixed(2) + "))"
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function displayZips(latLng, radius) {
var queryStr = "SELECT geometry, ZIP, latitude, longitude FROM " + tableid + " WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(" + latLng.toUrlValue(6) + ")," + radius.toFixed(2) + "))";
var queryText = encodeURIComponent(queryStr);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(displayZipText);
}
var infowindow = new google.maps.InfoWindow();
function displayZipText(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
if (map.getZoom() < 11) return;
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
var zipsList = "";
for (i = 0; i < numRows; i++) {
var zip = response.getDataTable().getValue(i, 1);
var zipStr = zip.toString()
while (zipStr.length < 5) {
zipStr = '0' + zipStr;
}
zipsList += zipStr + " ";
var point = new google.maps.LatLng(
parseFloat(response.getDataTable().getValue(i, 2)),
parseFloat(response.getDataTable().getValue(i, 3)));
}
document.getElementById('zips').innerHTML = "zipcodes in radius=" + zipsList;
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://www.google.com/jsapi"></script>
<form>
<span class="style51"><span class="style49">Show</span>:</span>
<label>Address:</label><input id="address" type="text" value="07646" /><label>Radius:</label><input id="radius" type="text" value="0.5" />
<input id="geocode" type="button" onclick="codeAddress();" value="Geocode" />
</form>
<div id="zips"></div>
<div id="map_canvas"></div>