Untitled

<!DOCTYPE html>
<?php
$places = ['restaurant', 'store', 'park', 'museum', 'church', 'mosque', 'bank', 'pharmacy', 'airport', 'beach', 'hospital'];
?>
<html>
    <head>
        <title>Place searches</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
            #feedback { font-size: 1.3em; }
            #type .ui-selecting { background: #B4CDCD; }
            #type .ui-selected { background: #5F9F9F; color: white; border: 1px solid black;}
            #type { list-style-type: none; margin: 0; padding: 0; width: 60%; }
            #type li { margin: 3px; padding: 0.4em; font-size: 1.3em; height: 18px; }
        </style>
        <script src="jquery-1.11.1.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi" ></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

        <script>
            var map;
            var infowindow;
            var placeslatlng = [];
            var point;
            var lat = 0;
            var lng = 0;
            $(document).ready(function () {
//                $("#type li").click(function () {
//                    initialize($(this).html());
//                });
//
                $(".ui-widget-content").hover(function () {
                    $(this).css("background", "#B4CDCD");
                }, function () {
                    $(this).css("background", "#000000");
                });
                $("#type").selectable({
                    stop: function () {
                        initialize($(".ui-selected").html());
                    }
                });
                $("#type").hover(function () {
                    $(this).css("cursor", "pointer");
                }, function () {
                    $(this).css("cursor", "none");
                });
                $("#searchTextField").keydown(function (e) {
                    if ((e.keyCode || e.which) == 13) {
                        var address = $("#searchTextField").val();

                        $.ajax({
                            url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address,
                            dataType: "json",
                            success: function (data) {
                                console.log("https://maps.googleapis.com/maps/api/geocode/json?address=" + address);
                                console.log(data.results[0].geometry.location);
                                lat = data.results[0].geometry.location.lat;
                                lng = data.results[0].geometry.location.lng;
                                var mapProp = {
                                    center: new google.maps.LatLng(lat, lng),
                                    zoom: 14,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                                };
                                map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
                                var request = {
                                    location: new google.maps.LatLng(lat, lng),
                                    radius: 1000,
                                    types: [place]
                                };
                                infowindow = new google.maps.InfoWindow();
                                var service = new google.maps.places.PlacesService(map);
                                service.nearbySearch(request, callback);
                                $("#place-table").html("");
                            }
                        });


                    }
                });
            });

            function initialize(place) {
                $.get("http://ipinfo.io", function (response) {
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({'address': response.city}, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (lat == 0 && lng == 0) {
                                console.log(lat + " " + lng);
                                lat = results[0].geometry.location.lat();
                                lng = results[0].geometry.location.lng();
                            }
                            point = new google.maps.LatLng(lat, lng);
                            map = new google.maps.Map(document.getElementById('map-canvas'), {
                                center: point,
                                zoom: 15
                            });
                            var defaultBounds = new google.maps.LatLngBounds(
                                    new google.maps.LatLng(42.0000, 21.4333),
                                    new google.maps.LatLng(42.0111, 21.1234));

                            var input = document.getElementById('searchTextField');

                            var searchBox = new google.maps.places.SearchBox(input, {
                                bounds: defaultBounds
                            });
                            var request = {
                                location: point,
                                radius: 1000,
                                types: [place]
                            };
                            infowindow = new google.maps.InfoWindow();
                            var service = new google.maps.places.PlacesService(map);
                            service.nearbySearch(request, callback);
                        }
                    });
                }, "jsonp");


            }

            function callback(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    $("#place-table").html("");
                    placeslatlng = [];
                    for (var i = 0; i < results.length; i++) {
                        $("#place-table").append("<tr><td>" + "<img src='" + results[i].icon + "'/>" + "</td><td>" + results[i].name + "</td></tr>");
                        placeslatlng.push(results[i]);
                        createMarker(results[i]);
                    }
                    $("#place-table tr").click(function () {
                        $(this).css("background", "lightgrey");
                        $("#place-table tr").not($(this)).css("background", "none");
                        idx = $(this).index();
                        console.log(placeslatlng[idx]);
                        lat = placeslatlng[idx].geometry.location.k;
                        lng = placeslatlng[idx].geometry.location.D;
                        //
                        var pyrmont = new google.maps.LatLng(lat, lng);
                        map = new google.maps.Map(document.getElementById('map-canvas'), {
                            center: pyrmont,
                            zoom: 15
                        });
                        //
                        createMarker(placeslatlng[idx]);
                    });
                }
            }

            function createMarker(place) {
                var placeLoc = place.geometry.location;
                var marker = new google.maps.Marker({
                    map: map,
                    position: place.geometry.location
                });

                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(place.name);
                    infowindow.open(map, this);
                });
            }

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

        </script>
    </head>
    <body>
        <div style="float: left;width: 15%;height: 100%">
            <ul id="type">
                <?php
                foreach ($places as $place) {
                    ?>
                    <li><?php echo $place ?></li>
                    <?php
                }
                ?>
            </ul>
        </div>
        <input id="searchTextField" type="text" size="50" style="position:absolute;margin-left:10%;float:left;z-index: 1">
        <div style="float: left;margin-left:15%;width: 60%;height: 100% ;position:absolute" id="map-canvas"></div>
        <div id="place" style="float: left;width: 25%;height: 100%;position:absolute;margin-left:75%;overflow: scroll">
            <table id="place-table">

            </table>
        </div>
    </body>
</html>
</html>