Menampilkan Lokasi Terdekat Menggunakan Google Places

Dipublikasikan oleh El Cicko pada

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 😀


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

14 Komentar

vanus · Juni 28, 2016 pada 10:44 am

gimana cara dapatin seluruh scriptnya kawan….mohon balasan

    El Cicko · Juni 28, 2016 pada 11:04 am

    maksudnya mas?

      vanus · Juni 28, 2016 pada 11:24 am

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

        El Cicko · Juni 28, 2016 pada 11:29 am

        kan tinggal copy paste yang ini aja mas 😀

          vanus · Juni 28, 2016 pada 11:34 am

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

          El Cicko · Juni 28, 2016 pada 11:48 am

          copas aja script diatas

      vanus · Juni 28, 2016 pada 11:29 am

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

        El Cicko · Juni 28, 2016 pada 11:33 am

        wah kalau itu saya ga pernah bikin.

vanus · Juli 12, 2016 pada 12:21 pm

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

galih · Maret 28, 2017 pada 12:23 pm

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

niken · April 19, 2017 pada 11:34 am

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

ardi · April 1, 2018 pada 5:14 pm

bang kalo data titik koordinatnya diambil dari database gimana scriptnya?

ardi · April 1, 2018 pada 5:16 pm

kalo markernya ngambil dari database gimana caranya?

    El Cicko · April 2, 2018 pada 1:13 pm

    referensinya bisa ke artikel ini mas

Tinggalkan Balasan

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