<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBm9sAw47mIC0n4e_k-WoWAG68xBLvduI8&callback=initMap"
  type="text/javascript"></script> 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<section class="map-directions">
    <div class="container">
        <div id="neighborhoodContainer" class="neighborhoodContainer">
            <div id="gmap_canvas" style="position: relative; overflow: hidden;">
                <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"> 
                </div>
            </div>
            <!--End #gmap_canvas--> 
            <div class="search-box">
                <div class="actions">
                    <div class="search-option">
                        <label for="gmap_type">Category:</label>
                        <select id="gmap_type">
                            <option value="bank">Bank</option>
                            <option value="bar">Bar</option>
                            <option value="grocery_or_supermarket">Grocery Store</option>
                            <option value="hospital">Hospital</option>
                            <option value="restaurant">Restaurant</option>
                            <option value="school">Schools</option>
                            <option value="store">Store</option>
                        </select>
                    </div>
                    <div class="search-option">
                        <label for="gmap_radius">Radius (miles):</label>
                        <select id="gmap_radius">
                            <option value="1609.34">1</option>
                            <option value="8046.72">5</option>
                            <option value="16093.4">10</option>
                        </select>
                    </div>
                    <div class="search-option">
                        <label for="gmap_keyword">Keyword (optional):</label>
                        <input id="gmap_keyword" type="text" name="gmap_keyword">
                    </div>
                    <input type="hidden" id="lat" name="lat" value="41.8136124">
                    <input type="hidden" id="lng" name="lng" value="-72.2723929">
                    <div id="button1" class="button" onclick="findPlaces(); return false;">Search</div>
                </div>
                <div class="search-results">
                    <ul id="search-list">
                    </ul>
                </div>
                <!--End .search-results-->
            </div>
            <!--End .actions-->
            <div class="search-results">
                <ul id="search-list">
                </ul>
            </div>
            <!--End .actions-->
        </div>

        <script>
            var geocoder;
            var map;
            var markers = Array();
            var infos = Array();
            var pin;
            var infoHome;


            function initialize() {
                // prepare Geocoder
                geocoder = new google.maps.Geocoder();

                // set initial position (New York)
                var myLatlng = new google.maps.LatLng(41.8136124, -72.2723929);

                var myOptions = { // default map options
                    zoom: 17,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);

                // Create marker for communty location.
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(41.8136124, -72.2723929),
                    map: map,
                    icon: 'home.png'
                });

                var contentString = '<div id ="infoWindow"><font style="color:#000;">Celeron Square Apartments               <br />180 Hunting Lodge Road<br/>Storrs Mansfield, CT 06268 </font></div>';
                infoHome = new google.maps.InfoWindow({
                    content: contentString
                });

                google.maps.event.addListener(marker, 'click', function() {
                    clearInfos();
                    infoHome.open(map, marker);
                });


            }

            // clear overlays function
            function clearOverlays() {
                if (markers) {
                    for (i in markers) {
                        markers[i].setMap(null);
                    }
                    markers = [];
                    infos = [];
                }
            }

            // clear infos function
            function clearInfos() {
                infoHome.close();
                if (infos) {
                    for (i in infos) {
                        if (infos[i].getMap()) {
                            infos[i].close();
                        }
                    }
                }
            }

            // find address function
            function findAddress() {
                var address = document.getElementById("gmap_where").value;

                // script uses our 'geocoder' in order to find location by address name
                geocoder.geocode({
                    'address': address
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) { // and, if everything is ok

                        // we will center map
                        var addrLocation = results[0].geometry.location;
                        map.setCenter(addrLocation);

                        // store current coordinates into hidden variables
                        document.getElementById('lat').value = results[0].geometry.location.$a;
                        document.getElementById('lng').value = results[0].geometry.location.ab;

                        // and then - add new custom marker
                        var addrMarker = new google.maps.Marker({
                            position: addrLocation,
                            map: map,
                            title: results[0].formatted_address,
                            icon: 'marker.png'
                        });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }

            // find custom places function
            function findPlaces() {

                // prepare variables (filter)
                var type = document.getElementById('gmap_type').value;
                var radius = document.getElementById('gmap_radius').value;
                var keyword = document.getElementById('gmap_keyword').value;

                var lat = document.getElementById('lat').value;
                var lng = document.getElementById('lng').value;
                var cur_location = new google.maps.LatLng(lat, lng);

                // prepare request to Places
                var request = {
                    location: cur_location,
                    radius: radius,
                    types: [type]
                };

                // Matches marker to type
                pin = [type];

                if (keyword) {
                    request.keyword = [keyword];
                }

                // send request
                service = new google.maps.places.PlacesService(map);
                service.search(request, createMarkers);
            }


            // create markers (from 'findPlaces' function)
            function createMarkers(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {

                    // if we have found something - clear map (overlays)
                    clearOverlays();

                    // Clear list under search
                    var locList = document.getElementById('search-list');
                    locList.innerHTML = "";


                    // and create new markers by search result
                    for (var i = 0; i < results.length; i++) {
                        createMarker(results[i]);
                        createList(results[i], i);
                    }
                } else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
                    alert('Sorry, nothing is found');
                }
            }

            // create single marker function
            function createMarker(obj) {
                // prepare new Marker object
                var mark = new google.maps.Marker({
                    position: obj.geometry.location,
                    map: map,
                    title: obj.name,
                    icon: '' + pin + '.png'
                });
                markers.push(mark);

                // prepare info window
                var infowindow = new google.maps.InfoWindow({
                    content: '<div id ="infoWindow"><img src="info-' + pin + '.png" /><font style="color:#000;">' + obj.name +
                        '<br />Rating: ' + obj.rating + '<br />' + obj.vicinity + '</font></div>'
                });


                // add event handler to current marker
                google.maps.event.addListener(mark, 'click', function() {
                    clearInfos();
                    infowindow.open(map, mark);
                });
                infos.push(infowindow);
            }

            // create result list function
            function createList(obj, num) {

                var container = document.getElementById('search-list');

                var new_li = document.createElement('li');
                new_li.setAttribute("onclick", "myClick(" + num + ");");

                container.appendChild(new_li);

                var locName = document.createElement('h2');
                locName.innerHTML = obj.name;
                new_li.appendChild(locName);

                var locAddress = document.createElement('p');
                locAddress.innerHTML = obj.vicinity;
                new_li.appendChild(locAddress);
            }

            function myClick(id) {
                google.maps.event.trigger(markers[id], 'click');
            }
        </script>
    </div>
</section>



<script type="text/javascript" src="http://app.resiteit.com/modules/Neighborhood/JS/Layout5R.js"></script><script type='text/javascript' src='https://www.google.com/jsapi'></script><script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBm9sAw47mIC0n4e_k-WoWAG68xBLvduI8'></script>	<script>
		// initialization
		google.maps.event.addDomListener(window, 'load', initialize);
</script>

 
/* General & Overall Styles */
ul {
    display: block;
    list-style-type: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px !important;
}

.neighborhoodContainer {
    height: 600px;
    margin: 0px auto;
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    font-family:roboto
}
#gmap_canvas {
    float: left;
    height: 600px;
    position: relative;
    width: 75%;
}
.search-box {
    float: right;
    height: 600px;
    width: 25%;
    background: #fff;
}
.actions {
    float: left;
    width: 100%;
    background-color: #FFFFFF;
    padding: 10px 0 30px;
    border-bottom: 0 solid #1e324f;
}
.actions label {
    display: block;
    font-size: 14px;
    margin: 2px 0 5px 8%;
    text-align: left;
}
.actions input {
    width: 83%;
    padding: 6px;
    border-radius: 5px;
    border: 1px solid #999;
}
.actions select {
    width: 85%;
    padding: 6px;
    border-radius: 5px;
    border: solid 1px #999;
}
.actions .button, .search-option {
    font: 11px;
    line-height: 1;
    margin-bottom: 5px;
    padding: 6px 0 7px 0;
    text-align: center;
    text-shadow: 0 1px 1px #fff;
    width: 100%;
}
.actions .button {
    width: 150px;
    margin: 0 auto;
    padding: 10px;
    font-size: 14px;
    background: #dedede;
    border-radius: 5px; 
    cursor: pointer;
    color: #333;
    display: block;
}
.button:hover{
    background: #eeecec;
}

.search-results {
    height: 300px;
    overflow: auto;
    float: left;
    width: 100%;
}
ul#search-list li {
    padding: 10px;
    border-bottom: 1px solid #999;
    background: #f5f4f4;
}
ul#search-list li:hover {
    color: #ffffff;
    background: #233a5b;
}
ul#search-list h2 {
    font-size: 16px;
    margin-bottom: 0;
    padding-bottom: 0;
}
.gm-style .gm-style-iw,
ul#search-list p {
    font-size: 12px;
}

.map-images {
    float: left;
    width: 60px;
}
.gm-style-iw img {
    float: left;
    margin-right: 5px;
   
}
font {
    float: left;
}
font a{
    color: #000;
    text-decoration: none;
}
font a:hover {
    color: #000;
    text-decoration: underline;
}
#infoWindow {
    width: 320px;
}

/* important: must have when setting map in a div with width as percentage */

#gmap_canvas img { max-width: inherit; }

@media only screen  and (max-width: 768px) {
    .neighborhoodContainer {
        float: left;
        overflow: visible;
        height: auto;
    }
    #gmap_canvas {
        width: 100%;
        height: 200px;
    }
    .search-box {
        width: 100%;
        background: none;
        height: auto;
    }
    .search-results {
        overflow: visible;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.