bdcorps/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Location Plotter</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>

<body>
    <div id="map" style="width: 400px; height: 400px;"></div>
    <input type="file" id="csv-file" name="files" />
    <script src="https://fastcdn.org/Papa-Parse/4.1.2/papaparse.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        var data;

        function handleFileSelect(evt) {
            var file = evt.target.files[0];

            var loc_point = [];
            var locations = [];

            Papa.parse(file, {
                header: true,
                dynamicTyping: true,
                complete: function(results) {
                    res = results.data;
                    console.log(res);
                    text = "";
                    for (i = 0; i < res.length; i++) {
                        text += res[i].latitude;
                        text += res[i].longitude;

                        loc_point.push("" + i);
                        loc_point.push(res[i].latitude);
                        loc_point.push(res[i].longitude);
                        loc_point.push("" + i);
                        locations.push(loc_point);
                        loc_point = [];
                    }
                    console.log(locations);

                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 10,
                        center: new google.maps.LatLng(locations[0][1], locations[0][2]),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    var infowindow = new google.maps.InfoWindow();

                    var marker, i;

                    for (i = 0; i < locations.length; i++) {
                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                            map: map
                        });

                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                            return function() {
                                infowindow.setContent(locations[i][0]);
                                infowindow.open(map, marker);
                            }
                        })(marker, i));
                    }
                }
            });
        }

        $(document).ready(function() {
            $("#csv-file").change(handleFileSelect);
        });
    </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Location Plotter</title>
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
	</head>

	<body>
	<div id="map" style="width: 400px; height: 400px;"></div>
	<input type="file" id="csv-file" name="files" />
	<script src="https://fastcdn.org/Papa-Parse/4.1.2/papaparse.min.js"></script>
	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

	<script type="text/javascript">
	var data;

	function handleFileSelect(evt) {
	var file = evt.target.files[0];

	var loc_point = [];
	var locations = [];

	Papa.parse(file, {
	header: true,
	dynamicTyping: true,
	complete: function(results) {
	res = results.data;
	console.log(res);
	text = "";
	for (i = 0; i < res.length; i++) {
	text += res[i].latitude;
	text += res[i].longitude;

	loc_point.push("" + i);
	loc_point.push(res[i].latitude);
	loc_point.push(res[i].longitude);
	loc_point.push("" + i);
	locations.push(loc_point);
	loc_point = [];
	}
	console.log(locations);

	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 10,
	center: new google.maps.LatLng(locations[0][1], locations[0][2]),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	var infowindow = new google.maps.InfoWindow();

	var marker, i;

	for (i = 0; i < locations.length; i++) {
	marker = new google.maps.Marker({
	position: new google.maps.LatLng(locations[i][1], locations[i][2]),
	map: map
	});

	google.maps.event.addListener(marker, 'click', (function(marker, i) {
	return function() {
	infowindow.setContent(locations[i][0]);
	infowindow.open(map, marker);
	}
	})(marker, i));
	}
	}
	});
	}

	$(document).ready(function() {
	$("#csv-file").change(handleFileSelect);
	});
	</script>

	</body>

	</html>