Press "Enter" to skip to content

Menampilkan Lokasi Terdekat Menggunakan Google Places

Pada artikel kali ini saya akan membahas tentang bagaimana cara menampilkan lokasi terdekat Google Places. Google Places adalah sebuah library dari Google yang memungkinkan kita untuk menampilkan lokasi terdekat dalam jarak atau radius tertentu pada peta.

Menampilkan Lokasi Terdekat # Apa Itu Google Places ?

Google Places adalah sebuah library dari Google Maps yang digunakan untuk melakukan pencarian lokasi pada peta baik dengan koordinat maupun Geocode dalam radius / jarak tertentu dan juga kata kunci tertentu.

Baca Juga : Menampilkan Marker Terdekat di Google Maps Dengan PHP-MySQL

Lokasi yang muncul biasanya adalah lokasi / spot yang terdaftar pada Google My Business dan mencantumkan koordinat lokasi beserta informasi dari lokasi tersebut.

Menampilkan Lokasi Terdekat Menggunakan Google Places # Kode

Sekarang kita akan mencoba menampilkan lokasi terdekat di Kota Bandung dengan kata kunci “coffee”, berikut source codenya.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kota Bandung</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script>
      var map;
      var infoWindow;
      var service;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          // koordinat kota bandung tepatnya daerah dago
          center: {lat: -6.8919604, lng: 107.6156133},
          zoom: 15,
          styles: [{
            stylers: [{ visibility: 'simplified' }]
          }, {
            elementType: 'labels',
            stylers: [{ visibility: 'on' }]
          }]
        });

        infoWindow = new google.maps.InfoWindow();
        service = new google.maps.places.PlacesService(map);
        map.addListener('idle', performSearch);
      }

      // fungsi pencarian dengan kata kunci 'coffee'
      function performSearch() {
        var request = {
          bounds: map.getBounds(),
          keyword: 'coffee'
        };
        service.radarSearch(request, callback);
      }

      function callback(results, status) {
        if (status !== google.maps.places.PlacesServiceStatus.OK) {
          console.error(status);
          return;
        }
        for (var i = 0, result; result = results[i]; i++) {
          addMarker(result);
        }
      }

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

        google.maps.event.addListener(marker, 'click', function() {
          service.getDetails(place, function(result, status) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
              console.error(status);
              return;
            }
            infoWindow.setContent(result.name);
            infoWindow.open(map, marker);
          });
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?&callback=initMap&libraries=places,visualization" async defer></script>
  </body>
</html>

Kamu bisa melihat demo dari script diatas di sini

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”jqjjvb” default_tab=”js,result” user=”elcicko”]See the Pen <a href=’http://codepen.io/elcicko/pen/jqjjvb/’>jqjjvb</a> by Riky Hasibuan (<a href=’http://codepen.io/elcicko’>@elcicko</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Sekian dulu tutorial Google Maps dari saya tentang cara menampilkan lokasi terdekat menggunakan Google Places. Silahkan dicoba dan semoga bermanfaat 😀

14 Comments

  1. vanus vanus Juni 28, 2016

    gimana cara dapatin seluruh scriptnya kawan….mohon balasan

      • vanus vanus Juni 28, 2016

        mas bleh mnta script sig Menampilkan Lokasi Terdekat Menggunakan Google Places….ni lagi smntra buat tugas akhir.

        • El Cicko El Cicko Post author | Juni 28, 2016

          kan tinggal copy paste yang ini aja mas 😀

          • vanus vanus Juni 28, 2016

            mas bleh nggk kirimin seluruh sourd codenya..kirim d dlm folder.

          • El Cicko El Cicko Post author | Juni 28, 2016

            copas aja script diatas

      • vanus vanus Juni 28, 2016

        mksdx saya mau minta sourd code untuk pembuatan sig Menampilkan Lokasi Terdekat Menggunakan Google Places……mksih sblmx mas.

        • El Cicko El Cicko Post author | Juni 28, 2016

          wah kalau itu saya ga pernah bikin.

  2. vanus vanus Juli 12, 2016

    mas bleh nggak minta script Menampilkan Lokasi Terdekat Menggunakan Google Places, kalau bisa dikirim pake format file ZIP aja…

  3. galih galih Maret 28, 2017

    itu berarti datanya memang ada di google maps ya bro? kalo ambil data dari database bisa ga pake cara ini bro? kalo bisa kayak mana ya codingnya hehe maap newbie bro

  4. niken niken April 19, 2017

    saya mau tanya, sudah saya copas tp kenapa gk bisa muncul ya marker buat kata kunci coffee nya?

  5. ardi ardi April 1, 2018

    bang kalo data titik koordinatnya diambil dari database gimana scriptnya?

  6. ardi ardi April 1, 2018

    kalo markernya ngambil dari database gimana caranya?

    • El Cicko El Cicko Post author | April 2, 2018

      referensinya bisa ke artikel ini mas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *