Cara & Tutorial Menggunakan API Google Maps Dan Local Search

Cara & Tutorial Menggunakan API Google Maps Dan Local Search
 
Google Maps merupakan sebuah jasa peta globe virtual gratis dan online yang disediakan oleh Google dapat ditemukan di http://maps.google.com. Ia menawarkan peta yang dapat diseret dan gambar satelit untuk seluruh dunia dan baru-baru ini, Bulan, dan juga menawarkan perencana rute dan pencari letak bisnis
 
Salah satu API (Application Programming Interface) yang disediakan oleh Google untuk dapat mengakses data mereka adalah Google Maps dan Google Local Search.

Dengan kedua API di atas, kamu bisa membuat aplikasi yang mirip dengan Urbanesia atau Google Places Directory di platform web dengan data dari Google tentunya. Nah sekarang mari kita mencoba membuat aplikasi web sederhana pencari tempat-tempat di sekitar kita berbasis peta. Berikut adalah kodingannya yang dimodifikasi dari kode contoh dari Google:
 
 
/*
* 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);

Hasil dari implementasi kodingan di atas bisa di lihat di bawah ini:

 

Bagaimana Cukup menarik bukan? Dengan kreatifitas dan kemauan untuk mengoprak-oprek API Google, saya yakin bisa membuat produk berkelas. Untuk saat ini data dari Google untuk lokasi-lokasi di Indonesia belum begitu lengkap dan akurat, namun saya yakin kedepan data-datanya akan terus berkembang dengan pesat.

 

 

 

 

source; labs.teknojurnal.com

Format Lainnya : PDF | Google Docs | English Version
Diposting pada : Senin, 23 Januari 12 - 12:49 WIB
Dalam Kategori : API GOOGLE MAPS, CARA MENGGUNAKAN API GOOGLE MAPS LOKASI, CARA & TUTORIAL MENGGUNAKAN SOUCE CODE API GOOGLE MAPS DAN LOCAL SEARCH DI WEBSITE SITUS, GOOGLE MAPS
Dibaca sebanyak : 9060 Kali
Tidak ada komentar pada blog ini...
Anda harus Login terlebih dahulu untuk mengirim komentar
Facebook Feedback

My Social-Net Accounts, You can Follow.. mungkin suatu hari nanti kita berjodoh (‾⌣‾)♉
ADS & Sponsor
Posting Terbaru Lainnya
Last Visitors
TRANSLATOR
Pengenalan
Kategori
Alexa Rank