Untitled

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="vendor/jquery/jquery-3.2.1.min.js">
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <title>Reverse Geocoding</title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

        /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
        #map {
            height: 100%;
        }

        #map .centerMarker {
            position: absolute;
            /*url of the marker*/
            background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
            /*center the marker*/
            top: 50%;
            left: 50%;
            z-index: 1;
            /*fix offset when needed*/
            margin-left: -10px;
            margin-top: -34px;
            /*size of the image*/
            height: 34px;
            width: 20px;
            cursor: pointer;
        }


        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #floating-panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            width: 350px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }

        #latlng {
            width: 225px;
        }

        .loading-bro {
            margin: 50px auto;
            width: 150px;
        }

        .finish {
            margin: 50px auto;
            width: 150px;
        }

        .loading-bro>h1 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 1em;
            font-weight: 300;
            color: #8E8E8E;
        }

        #load {
            width: 150px;
            animation: loading 3s linear infinite;
        }

        #load #loading-inner {
            stroke-dashoffset: 0;
            stroke-dasharray: 300;
            stroke-width: 10;
            stroke-miterlimit: 10;
            stroke-linecap: round;
            animation: loading-circle 2s linear infinite;
            stroke: #51BBA7;
            fill: transparent;
        }

        @keyframes loading {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes loading-circle {
            0% {
                stroke-dashoffset: 0;
            }

            100% {
                stroke-dashoffset: -600;
            }
        }
    </style>
</head>

<body>
    <!-- <div class="loading-bro">
        <h1>Loading</h1>
        <svg id="load" x="0px" y="0px" viewBox="0 0 150 150">
            <circle id="loading-inner" cx="75" cy="75" r="60" />
        </svg>
    </div>
    <div class="finish" style="display: none;">
        <h1>Success</h1>
    </div> -->
    <input type="text" id="latitude" placeholder="Latitude" />
    <input type="text" id="longitude" placeholder="Longitude" />
    <div id="map"></div>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 17
            });
            var geocoder = new google.maps.Geocoder;
            var infowindow = new google.maps.InfoWindow;

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude

                    };
                    document.getElementById('latitude').value = position.coords.latitude;
                    document.getElementById('longitude').value = position.coords.longitude;

                    google.maps.event.addListener(map, 'center_changed', function () {
                        document.getElementById('latitude').value = map.getCenter().lat();
                        document.getElementById('longitude').value = map.getCenter().lng();

                    });

                    var latlng = { lat: parseFloat(escape(document.getElementById('latitude').value)), lng: parseFloat(escape(document.getElementById('longitude').value)) };
                    geocoder.geocode({ 'location': latlng }, function (results, status) {
                        if (status === 'OK') {
                            // $('.loading-bro').hide();
                            // $('.finish').show();
                            if (results[0]) {
                                var marker = new google.maps.Marker({
                                    position: latlng,
                                    map: map,
                                    visible: false
                                });
                                var url = 'http://127.0.0.1/reverse_geolocation/map_db_post.php?&lat=' + position.coords.latitude + '&lng=' + position.coords.longitude + '&address=' + results[0].formatted_address;
                                downloadUrl(url, function (data, responseCode) {
                                    if (responseCode == 200 && data.length <= 1) {
                                        infowindow.close();
                                        messagewindow.open(map, marker);
                                    }
                                });
                                console.log(results[0].formatted_address);
                                // infowindow.setContent(results[0].formatted_address);
                                // infowindow.open(map, marker);
                                map.setCenter(pos);
                                google.maps.event.addListener(map, 'center_changed', function () {
                                    geocodePosition(marker.getPosition());
                                    $('<div/>').addClass('centerMarker').appendTo(map.getDiv())
                                        //do something onclick
                                        .ready(function () {
                                            var that = $(this);
                                            if (!that.data('win')) {
                                                that.data('win', new google.maps.InfoWindow({
                                                    content: results[0].formatted_address
                                                }));
                                                that.data('win').bindTo('position', map, 'center');
                                            }
                                            that.data('win').open(map);
                                        });
                                });

                            } else {
                                window.alert('No results found');
                            }
                        } else {
                            window.alert('Geocoder failed due to: ' + status);
                        }
                    });


                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }

            function downloadUrl(url, callback) {
                var request = window.ActiveXObject ?
                    new ActiveXObject('Microsoft.XMLHTTP') :
                    new XMLHttpRequest;


                request.onreadystatechange = function () {
                    if (request.readyState == 4) {
                        request.onreadystatechange = doNothing;
                        callback(request.responseText, request.status);
                    }
                };

                request.open('GET', url, true);
                request.send(null);
            }

            function doNothing() {
            }


        }
        google.maps.event.addDomListener(window, 'load', initMap);
        // function initialize() {
        //     var mapOptions = {
        //         zoom: 14,
        //         center: new google.maps.LatLng(52.5498783, 13.425209099999961),
        //         mapTypeId: google.maps.MapTypeId.ROADMAP
        //     };
        //     map = new google.maps.Map(document.getElementById('map_canvas'),
        //         mapOptions);
        //     google.maps.event.addListener(map, 'center_changed', function () {
        //         document.getElementById('default_latitude').value = map.getCenter().lat();
        //         document.getElementById('default_longitude').value = map.getCenter().lng();
        //     });
        //     $('<div/>').addClass('centerMarker').appendTo(map.getDiv())
        //         //do something onclick
        //         .click(function () {
        //             var that = $(this);
        //             if (!that.data('win')) {
        //                 that.data('win', new google.maps.InfoWindow({
        //                     content: 'this is the center'
        //                 }));
        //                 that.data('win').bindTo('position', map, 'center');
        //             }
        //             that.data('win').open(map);
        //         });
        // }

        // google.maps.event.addDomListener(window, 'load', initialize);


    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQPUqVEEU8Mlk56iWMA0j39foTqDdZA7k&callback=initMap">
    </script>
</body>

</html>