Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Location</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div class="container">
<h2>Lat/Long:</h2>
<div class="form-group">
<label for="latlong">Area Code:</label>
<input class="form-control" id="txtAddress" placeholder="Enter area code">
<button type="submit" class="btn btn-default" onclick="GetLocation()">Submit</button>
<button class="btn btn-default" onclick="drawChart()">Map these points</button>
</div>
<div id="map_div" style="width: 400px; height: 300px"></div>
</div>
<br />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDwi20tN2TxroDYyvcSH2XNMlDXtDg3BaY"></script>
<script type="text/javascript">
var latitude;
var longitude;
function GetLocation() {
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("txtAddress").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
drawChart();
return [latitude, longitude];
// latlongarr.push([latitude, longitude]);
// alert(latlongarr);
} else {
alert("Request failed.")
}
});
};
google.charts.load("current", {packages:["map"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long'],
[39.9522,-75.1932],
]);
data.addRow([latitude,longitude]);
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, {showTip: true});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.