Cara Membuat Search Box Google Map

Google map menjadi salah satu layanan yang sangat popular saat ini, fitur serba instan menjadikannya layak disebut sebagai aplikasi penunjuk lokasi paling bagus saat ini. Disamping kepopuleran google maps, sebagai perusahaan yang sangat besar tentu google mendukung banyak sekali developer yang ingin memanfaatkan fasilitas penunjuk lokasi sebagai pelengkap aplikasi yang mereka kembangkan.

Pada artikel ini kita memerlukan API_KEY untuk dapat menjalankannya, bagi kalian yang belum tahu apa itu API_KEY google map dan ingin tahu cara membuatnya bias lihat artikel saya yang berjudul Cara mendapatkan API_KEY Google Map

Pada contoh ini kita akan membuat kotak pencarian seperti yang ada di google map dengan fitur auto-complete dimana semua orang bisa mencari nama tempat dan kotak pencarian akan menampilkan daftar tempat yang serupa dengan keyword.

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
    <script>


      function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });

        // Membuat Kotak pencarian terhubung dengan tampilan map
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Mengaktifkan detail pada suatu tempat ketika pengguna
        // memilih salah satu dari daftar prediksi tempat 
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // menghilangkan marker tempat sebelumnya
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // Untuk setiap tempat, dapatkan icon, nama dan tempat.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Membuat Marker untuk setiap tempat
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
         async defer></script>

Untuk menerapkan kode diatas kita perlu memberikan API_KEY yang harus diletakan pada tulisan YOUR_API_KEY yang ada diatas.

Dengan begitu kita sudah bisa membuat search box menggunakan API_KEY google map. Baiklah teman-teman itu saja yang kita bahas kali ini, semoga dapat bermanfaat. Terima kasih