Cara & Tutorial Menggunakan API Google Maps Dan Local Search

/*
* Bagaimana cara membuat Google Maps dan mengintegrasikannya dengan Local Search
*/

// Pertama-tama kita harus meload API Google-nya.
google.load('maps' , '2');
google.load('search' , '1');

// Variabel global yang akan kita set ketika event OnLoad
var map;
var searcher;

// Kedua, kita buat fungsi OnLoad
function OnLoad() {
// Ambil konten dari div dan hapus isinya.
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = ''; // Hapus semua konten yang terdapat dalam div

// Lalu kita buat dua div untuk menyimpan konten kita
var mapContainer = document.createElement('div'); // buat div untuk peta
mapContainer.style.height = '350px'; // set tinggi peta
mapContainer.style.width = '350px'; // set lebar peta

var controlContainer = document.createElement('div'); // buat div untuk kontrol Local Search
controlContainer.style.width = '350px'; // set lebar kontrol

// Sekarang kita harus menambahkan kedua div tersebut ke div konten yang terdapat di "body" dokumen
contentDiv.appendChild(mapContainer);
contentDiv.appendChild(controlContainer);

// Sekarang kita sudah siap untuk membuat peta...
map = new google.maps.Map2(mapContainer);

// ... dan tambahkan beberapa kontrol.
map.addControl(new google.maps.SmallMapControl()); // Tambahkan sebuah kontral peta kecil
map.addControl(new google.maps.MapTypeControl()); // Tambahkan kontrol tipe peta

// Kita tunggu sampai tahap terakhir untuk inisialisasi peta
// Jadi mari kita buat kontrol untuk pencarian data
var searchControl = new google.search.SearchControl();

// Inisialisasikan Local Search
searcher = new google.search.LocalSearch(); // buat objeknya
searcher.setCenterPoint(map); // kombinasikan objek Local Search dengan peta

// Buat objek SearcherOptions agar kita dapat melihat semua hasil pencarian data
var options = new google.search.SearcherOptions(); // buat objeknya
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

// Tambahakn objek Local Search ke SearchControl
searchControl.addSearcher(searcher , options);

// Selanjutnya, kita harus mensetting SearchCompleteCallback
searchControl.setSearchCompleteCallback(searcher , function() {
map.clearOverlays();
var results = searcher.results; // Ambil array hasil pencarian
// Kita loop agar mendapat poin-poin lokasi dari hasil pencarian
for (var i = 0; i < results.length; i++) {
var result = results[i]; // Ambil hasil pencarian secara spesifik
var markerLatLng = new google.maps.LatLng(parseFloat(result.lat),
parseFloat(result.lng));
var marker = new google.maps.Marker(markerLatLng); // Buat markernya

// Integrasikan informasi untuk infoWindow (popup marker peta)
marker.bindInfoWindow(result.html.cloneNode(true));
result.marker = marker; // integrasikan marker dengan hasil pencarian
map.addOverlay(marker); // tambahkan marker ke peta
}

// Variabel untuk menyimpan dimana peta harus dipusatkan
var center = searcher.resultViewport.center;

// Kalkulasikan berapa level zoom yang diperlukan
var ne = new google.maps.LatLng(searcher.resultViewport.ne.lat,
searcher.resultViewport.ne.lng);
var sw = new google.maps.LatLng(searcher.resultViewport.sw.lat,
searcher.resultViewport.sw.lng);
var bounds = new google.maps.LatLngBounds(sw, ne);
var zoom = map.getBoundsZoomLevel(bounds, new google.maps.Size(350, 350));

// Set pusat peta
// parseFloat menkonversikan lat/lng dari string menjadi folat, yang mana
// diperlukan oleh constructor LatLng.
map.setCenter(new google.maps.LatLng(parseFloat(center.lat),
parseFloat(center.lng)),
zoom);
});

// Gambar kontrolnya
searchControl.draw(controlContainer);

// Set poin pusat peta dan Selesai!!!
map.setCenter(new google.maps.LatLng(-6.178273, 106.793268), 11);

// Eksekusikan pencarian awal
searchControl.execute('restaurant');
}
google.setOnLoadCallback(OnLoad);