jakesylvestre/.html

## .html
<!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>
	<!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>