Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
       
        #googleMap {
            height: 100%;
        }
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #pac-container {
            padding: 5px;
        }
        .pac-card {
            margin: 10px 10px 0 0;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            background-color: #ffffff;
            font-family: Roboto;
        }
        #title {
            color: #fff;
            background-color: #4d90fe;
            font-size: 15px;
            font-weight: 500;
            padding-left: 5px;
        }
        .pac-controls label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }
        #pac-input {
            font-family: Roboto;
            width: 400px;
        }
        #pac-input:focus {
            border-color: #4d90fe;
        }
    </style>
</head>
<body>
    <div class="pac-card" id="pac-card">
        <div id="title">
            Search Address
        </div>
        <div id="pac-container">
            <input id="pac-input" type="text" placeholder="Enter a location">
        </div>
    </div>
    <div id="googleMap"></div>
    <script>
        function myMap() {
            var mapProp = {
                center: new google.maps.LatLng(12.9716, 77.5946),
                zoom: 10,
            };
            var map = new google.maps.Map(document.getElementById('googleMap'), mapProp);
            var card = document.getElementById('pac-card');
            var input = document.getElementById('pac-input');
            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
   
            var marker = new google.maps.Marker({
                map: map
            });
           
            //Use Places Autocomplete
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.addListener('place_changed', function() {
                marker.setVisible(false);
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    // User entered the name of a Place that was not suggested and
                    // pressed the Enter key, or the Place Details request failed.
                    window.alert("No details available for input: '" + place.name + "'");
                    return;
                }
                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(10);
                }
                //Put markers on the place
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);
            });
        }
    </script>
    <!-- Replace the value of the key parameter with your own API key. Notice that I added "libraries=places" to include the use of Places libraries in your code -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=myMap" async defer></script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
devpreciousjoypro
0viewers