“Auto Detect” Lokasi Sekitar Google Maps


“Auto Detect” disini dimaksudkan untuk men-generate secara otomatis data-data lokasi sekitar dari pusat lokasi. Data tersebut otomatis diperoleh dari datanya google. Sebelumnya, fitur lokasi sekitar pada google map ini saya pakai untuk melengkapi fitur pada aplikasi tugas akhir saya. Tugas akhir saya mengenai website penjualan properti, jadi properti yang di iklankan, dapat diketahui tempat-tempat umum disekitar lokasi properti tersebut. Lokasi sekitar tersebut dapat ditentukan radiusnya dengan satuan jarak kilometer. Jadi misalnya dalam radius 1 km dari lokasi properti terdapat tempat-tempat umum apasaja. Oke, langsung saja saya bagikan scriptnya :

<!doctype html>
<html>
	<head>
		<title>"Auto Detect" Lokasi Sekitar Google Maps</title>
	</head>
	<body>
	<script src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

    <style>
      #map {
        height: 600px;
        width: 100%;
        border: 1px solid #333;
        margin-top: 0.6em;
      }
    </style>

    <script>
      var map;
      var infowindow;
	  var image = 'images/property.png';
	  var image2= 'images/lokasi_sekitar.png';

      function initialize() {
        var pusatRadius = new google.maps.LatLng(-7.754962911617965, 110.38287026748662);

          map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: pusatRadius,
          zoom: 17        });

		    var PusatMarker = new google.maps.Marker({
            position: pusatRadius,
            map: map,
            icon: image,
            title:'Lokasi Properti'
        });

        var keteranganProperti = '<a href="https://herupurwito.wordpress.com"><b>Rumah Sederhana</b></a><br/>Rumah dijual karena tidak ada yang menghuni lagi';
            var KetPropertiinfowindow = new google.maps.InfoWindow({
              content: keteranganProperti
            });

			google.maps.event.addListener(PusatMarker, 'click', function() {
              KetPropertiinfowindow.open(map,PusatMarker);
            });

            var request = {
              location: pusatRadius,
              radius: 500 /*jarak radius lokasi sekitar yang akan ditampilkan di peta */
            };
                  infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

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

		/* perhitungan jarak lokasi sekitar ke lokasi utama */
          var koordinat = ""+place.geometry.location+"";
          var myarr = koordinat.split("(");

          var koordinatNew = myarr[1];
          var myarr2 = koordinatNew.split(")");
          var myarr3 = myarr2[0].split(", ");

          var longitudeArr = myarr3[0];
          var latitudeArr = myarr3[1];

          var longitudeProperti=-7.754962911617965;
          var latitudeProperti=110.38287026748662;

          var longSekitar=longitudeArr;
          var latSekitar=latitudeArr;

          var hasil=6371 * Math.acos( Math.cos( (Math.PI / 180) * ( longSekitar ) ) * Math.cos( (Math.PI / 180) *( longitudeProperti ) ) * Math.cos( (Math.PI / 180) *( latSekitar ) - (Math.PI / 180) *( latitudeProperti ) ) + Math.sin( (Math.PI / 180) *( longSekitar ) ) * Math.sin( (Math.PI / 180) *( longitudeProperti ) ) );
          var hasilAkhir=Math.round(hasil*100)/100;
		/* perhitungan jarak lokasi sekitar ke lokasi utama */

		/* tampil info window pada titik lokasi sekitar */
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent("<b>"+place.name+"</b><br/>Jarak dari Lokasi Properti : "+hasilAkhir+" km");
          infowindow.open(map, this);
        });
		/* tampil info window pada titik lokasi sekitar */
      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    <div id="map"></div>

	</body>
</html>

Tampilan hasilnya :

tampilan_lokasi_sekitar_google_maps

tampilan_lokasi_sekitar_google_maps

 

Pada script diatas saya mencontohkan untuk lokasi pada koordinat -7.754962911617965, 110.38287026748662,

sedangkan untuk radiusnya, saya atur 500m atau setengah kilometer.

kemudian, disetiap lokasi sekitar, saya hitung jaraknya, sehingga dapat diketahui berapa jarak lokasi sekitar dengan pusatnya.

Beberapa fungsi pada script, sudah saya beri keterangan supaya lebih mudah untuk dipahami

Untuk scriptnya, bisa download disini

Advertisements

4 thoughts on ““Auto Detect” Lokasi Sekitar Google Maps

  1. wow amazing. terimakasih sudah share ilmunya pak..

  2. mas, itu cara nya bagaimana kalau mau menentukan titik pusat manual, jadi tidak ditentukan sebelumnya… titik pusat nya ditentukan saat memasukkan titik koordinat nya diinterface nya?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s