nasrulhazim
10/30/2017 - 5:44 PM

Geocode with Google Map API

Geocode with Google Map API

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<title>GeoCode</title>

</head>
<body>
	<div id="container"></div>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		var api_key = 'YOUR_API_KEY';
		var gmap_api = 'https://maps.googleapis.com/maps/api/geocode/json?';
		var addresses = ['kajang', 'bangi', 'puchong'];
		var data = [];
		jQuery(document).ready(function($) {
			for (var i = addresses.length - 1; i >= 0; i--) {
				var address = addresses[i]
				$.getJSON(gmap_api, {
					address: address,
					key: api_key,
				}, function(json, textStatus) {
					if(json.results && json.results.length > 0) {
						datum = json.results[0];
						data.push(datum);
						var id = '<p>' + datum.place_id + '</p>';
						var name = '<h4>' + datum.address_components[0]['long_name'] + '</h4>';
						var location = '<p>' + datum.geometry.location.lat + ', ' + datum.geometry.location.lng + '</p>';
						var info = name + id + location + '<hr>';
						$('#container').append(info)
					}
				});
			}
		});
	</script>
</body>
</html>