How to add search box to Google map on website?

Question

I have added maps to my website but can't seem to add a search box with the map to search locations. I have given the code below that I used for adding maps. Can someone help with adding search box to the code?

<div  id="googleMap" style="width:100%;height:400px;"></div>

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);

      google.maps.event.addListener(map, 'click', function(e) {
        placeMarker(e.latLng, map);
        document.getElementById("latitude").value = e.latLng.lat();
        document.getElementById("longitude").value = e.latLng.lng();
      });

      function placeMarker(position, map) {
        var marker = new google.maps.Marker({
          position: position,
          map: map
        });
        map.panTo(position);
      }

    }


    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=myMap"></script>

Did you see the [example in the documentation](https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/places-searchbox)? What trouble did you have trying to add that to your code? Please provide a [mcve] that demonstrates your issue. — geocodezip, Oct 30 '19 at 13:39
possible duplicate of [How to add a GoogleMap Search Box to my customized map?](https://stackoverflow.com/questions/21412111/how-to-add-a-googlemap-search-box-to-my-customized-map) — geocodezip, Oct 30 '19 at 13:43

score 0 · Answer 1 · answered Nov 18 '19 at 03:25

You can use Autocomplete in your code. It will provide a list of suggestion to complete the user's input. Once you choose the place from the list, you can then get the place property to present it on the map and put a marker on it.

Here is a simplified code where I incorporated your code to the Google Maps Platform Autocomplete code sample.

<!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. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=myMap" async defer></script>
</body>

</html>

You can also view this simplified code here.

score -1 · Answer 2 · answered Oct 30 '19 at 11:27

You can use something like this:

    // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

How to add search box to Google map on website?

2 Answers2