<!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