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