Findr/index.html at master · chenan02/Findr · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Event Locator</title>
    <link href="style.css" rel="stylesheet"></link>
	<style type ="text/css"></style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
    //initialize geolocation fxn
    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.Latlng(//geolocation);
        var mapOptions = {
            zoom: 8,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    };
    function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( {'address': address}, function(results, status) {
            if(status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new.google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert('Geocode was not succussful for the following reason' + status);
            }
        });
    };
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <script>
        $(document).ready(function (){
            $("#leftbutton").click(function (){
                $("#middle").hide();
                $("#right").hide();
                $("#left").show();
            });
            $("#middlebutton").click(function (){
                $("#left").hide();
                $("#right").hide();
                $("#middle").show();
            });
            $("#rightbutton").click(function (){
                $("#left").hide();
                $("#middle").hide();
                $("#right").show();
            });
        }
    </script>
</head>
<body>
    <div id="wrap">
        <img src="http://www.glowsticksltd.com.au/blog/wp-content/uploads/2012/02/carols3.jpg">
        <div id="leftbutton" class="button"></div>
        <div id="middlebutton" class="button"></div>
        <div id="rightbutton" class="button"></div>
        <div id="middle">
          <h1>Welcome.</h1>
        </div>
        <div id="left">
            <form id="form" action="insert.php" method="post">
                Name: <input name="name" type="text"><br>
                Date: <input name="date" type="date"><br>
                Time: <input name="time" type="time"><br>
                Location: <input name="location" type="text"><br>
<!--                <input type="submit" value="Submit!" onclick="codeAddress() insertDB()">   -->
                <button id="submit">Submit!</button>
            </form>
            <span id="result"></span>
        </div>
        <div id="right">
            <div id="map-canvas"></div>
            <div id="details"></div>
        </div>
    </div>

    <!-- jQuery AJAX -->
    <script>
        $("submit").click(function(event) {
        //or function insertDB() {
            event.preventDefault();
            $.ajax({
                type: "POST",
                url: "insert.php",
                data: $(this).serialize(),
                success: posttomap?
            }),
        });
    </script>
    </script>
</body>
</html>