Sunda Cyber Army

* Sunda Cyber Army 2k17 *
Indonesia Defacer ~
Current File : /home/dent/public_html/_demos/googlelocs.php
<?php
// AIzaSyBy6I7KJFgYZOJhtzG9uua8yBPwpISBMn8
?>

<html>
<head>
    <title>AJAX / API Demo</title>
    <meta charset="UTF-8">
    <style>
body{
    background-color: black;
            font-family: Avenir;
        }
        .container{
    display: flex;
    border-radius: 10px;
            justify-content: space-evenly;
            margin-top: 40px;
        }

        .box{
    border: 2px solid grey;
            border-radius: 10px;
            padding: 25px;
            width: 600px;
            color: white;
            margin: 0px 10px;
        }
        .addressbox{
    font-size: 10pt;
            border-radius: 8px;
            padding: 10px;
        }

        #btn{
            font-size: 20pt;
            width: 100%;
        }
        #address{
            display: flex;
            flex-direction: column;
        }
        .horizontalFlex{
    display: flex;
    flex-direction: row;
        }

    </style>
</head>


<body>

<div class="container">
    <div class="box">
        <h2>Google Maps Geocoding API</h2>
        <h4>Enter a street address to get back a longitude and latitude, with additional parameters</h4>

        <form id="address">
            <input type="text" placeholder="Enter the street address" class="addressbox" id="addbox">
            <div class="horizontalFlex">
                <input type="text" placeholder="Enter the city" class="addressbox" style="flex: 1" id="citybox">
                <input type="text" placeholder="Enter the state (abbrv)" class="addressbox" style="flex: 1" id="statebox">
                <input type="text" placeholder="Enter the zip" class="addressbox" style="flex: 1" id="zipbox">
            </div>
            <br>
            <input type="submit" value="Click here to get longitude and latitude" id="btn">
            <br>
            <div class="longlat"></div>
        </form>
    </div>





</div>


</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--    load in jQuery-->

<script>
jQuery(document).ready(function() {
    // call the jQuery ready function
    $("#address").on("submit", function(event){
        //listen for a form submission

        event.preventDefault();
        //prevent the form submission from reloading the page

        let address = $("#addbox").val()

            let city = $("#citybox").val();

            let state = $("#statebox").val();

            let zip = $("#zipbox").val();
            //get the data from our form fields

            let link = "https://maps.googleapis.com/maps/api/geocode/";
            //start with an initial link to the maps API
            link = link + "json?address=";

            link = link + address + ", " + city + ", " + state + " " + zip;
            link = link.replace(/ /g, "+");

                link = link + "&key=" + "AIzaSyBy6I7KJFgYZOJhtzG9uua8yBPwpISBMn8";

            alert(link);

            $.get(link, function(result) {
                // alert(result);
                // console.log(result);
                let parsed = JSON.parse(JSON.stringify(result));
                console.log(parsed);
                let lat = parsed.results[0].geometry.location.lat;
                let lng  = parsed.results[0].geometry.location.lng;

                console.log(lat);
                console.log(lng);
                document.querySelector(".longlat").innerHTML +=  "lat=" + lat + " and long = " + lng;
            })

        });
});

</script>

</html>