Nearby Places Example

<!DOCTYPE html>
<html>
  <head>
    <title>Nearby Places</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
            * element that contains the map. */
            #map {
        height: 100%;
        }

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

        #floating-panel {
            position: absolute;
            top: 10px;
            left: calc(50% - 185px);
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            text-align: center;
            font-family: 'Roboto','sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

    </style>

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
    <div id="floating-panel">
        <span>Find Store</span><br>
        <input id="address" type="textbox" placeholder="Search Center Point" style="width:300px;">
    </div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&channel=2&libraries=places" async></script>

    <script>

        function initMap(){
            var initLatlong = new google.maps.LatLng(-6.2297264,106.9894288);

            map = new google.maps.Map(document.getElementById('map'), {
                center: initLatlong,
                zoom: 10,
                mapTypeControl: false,
                zoomControl: true,
                zoomControlOptions: {
                        position: google.maps.ControlPosition.LEFT_BOTTOM
                    },
                styles: [
                    {
                        featureType: "poi",
                        elementType: "labels",
                        stylers: [{ visibility: "off" }]
                    }
                ]
            });

            var infoWindow = new google.maps.InfoWindow();

                var icon = {
                    url: "https://storage.googleapis.com/terra_web/images/marker.png", // url
                    Scalessize: new google.maps.Size(50, 50), // scaled size
                    origin: new google.maps.Point(0,0), // origin
                    anchor: new google.maps.Point(0, 0) // anchor
                };
                marker = new google.maps.Marker({
                    icon:"https://storage.googleapis.com/terra_web/images/marker_50.png",
                    map: map
                });
                marker.addListener('click', function() {
                infoWindow.open(map, marker);
                });

                var autocomplete = new google.maps.places.Autocomplete(
                    (document.getElementById('address'))
                );

                autocomplete.addListener('place_changed', function() {
                infoWindow.close();
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    return;
                }

                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                    map.setZoom(16);
                    var servicePlace = new google.maps.places.PlacesService(map);
                    servicePlace.nearbySearch({
                    location: place.geometry.location,
                    radius: 5000,
                    type: ['restaurant']
                    }, callback);

                    function callback(results, status) {
                        if (status === google.maps.places.PlacesServiceStatus.OK) {
                        for (var i = 0; i < results.length; i++) {
                            createMarker(results[i]);
                        }
                        }
                    }

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

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

                }
                } else {

                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }

                // Set the position of the marker using the place ID and location.
                marker.setPlace({
                    placeId: place.place_id,
                    location: place.geometry.location
                });
                marker.setVisible(true);

                infoWindow.setContent("latlng : "+place.geometry.location);
                infoWindow.open(map, marker);

                /* circle test
                    ----------------------------------------------- */
                    var _radius = 2000;
                    var rMin = _radius * 4/5;
                    var rMax = _radius;
                    var direction = 1;

                    var circleOption = {
                        center: place.geometry.location,
                        fillColor: '#3878c7',
                        fillOpacity: 0.2,
                        map: map,
                        radius: 2000,
                        strokeColor: '#3878c7',
                        strokeOpacity: 1,
                        strokeWeight: 0.5
                    };

                    var circle = new google.maps.Circle(circleOption);
                });
        }

    </script>
  </body>
</html>