Menampilkan Lokasi Terdekat Menggunakan Google Places

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]

Nah, mudah bukan ? silahkan dicoba dan semoga bermanfaat 😀

14 pemikiran pada “Menampilkan Lokasi Terdekat Menggunakan Google Places”

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

    Balas
  2. 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

    Balas

Tinggalkan komentar