Cara Membuat Street View Dengan API Google Maps

Cara Membuat Street View Dengan API Google Maps - Sebelumnya kita sudah membuat map dengan direction yang dapat di drag, kali ini kita akan membuat Street View dengan API Google Maps. Street View adalah fitur dalam google maps yang memungkinkan kita melihat gambar atau foto asli dari jalanan secara 360°. Foto street view di ambil menggunakan kamera yang di letakan pada bagian atas mobil google street view, mungkin anda pernah beberapa kali berpapasan dengan mobilnya.

Sekarang fitur untuk street view sudah tersedia di peta indonesia, anda dapat mencoba melihat wilayah - wilayah jalanan serta tempat - tempat indonesia lewat foto 360°. Anda mungkin juga dapat menemukan foto rumah anda atau bahakan foto anda sendiri seperti foto yang digunakan dalam artikel ini adalah foto penulis sendiri (bkakakakak narsis ). untuk lebih jelasnya langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama street_view.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Membuat Street View dengan API Google Maps</title>
    <style>
   html { height: 100% }
   #panel{padding:5px;}
      #address {
   height: 25px;
   padding: 2px;
   width: 400px;
      }
   #btn{
     height: 31px;
     background: #267BA8;
     border: none;
     padding: 5px;
     color: #fff;
   }
   #map-canvas {width:50%;height:500px;float:left;}
   #pano{width:50%;height:500px;float:right;}
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:900px;
   height:625px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-6.189247,107.020959);
    var mapOptions = {
   zoom: 12,
   center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    var panoramaOptions = {
   position: latlng,
   pov: {
     heading: 34,
     pitch: 10
   }
    };
    var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
    map.setStreetView(panorama);
  }

  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
     map.setCenter(results[0].geometry.location);
     var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
     });
   } else {
     alert('Geocode was not successful for the following reason: ' + status);
   }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Street View dengan API Google Maps</h1>
  <div id="panel">
    <input id="address" type="textbox" value="Jl. K.H. Tajudin, Bekasi Regency, West Java">
    <input id="btn" type="button" value="Search" onclick="codeAddress()">
  </div>
  <div id="map-canvas"></div>
  <div id="pano"></div>
 </div>
  </body>
</html>

Perhatikan script berikut ;

var panoramaOptions = {
   position: latlng,
   pov: {
     heading: 34,
     pitch: 10
   }
    };
    var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
    map.setStreetView(panorama);

Script ini lah yang berfungsi untuk menapilkan stret view anda dan meletakannya pada elemen html dengan id pano.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Jika anda ingin mencobanya anda dapat menarik icon berbentuk orang kecil di map dan drop di daerah yang di tandai garis biru, karena wilayah itulah yang terdapat foto street viewnya.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Street View Service Dengan API Google Maps di sini : CEK TKP

Street View Dengan API Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.