Menghubungkan Google Maps dan Flickr API

() translation by (you can also view the original English article)

Bayangkan kamu telah membuat peta indah seperti yang klien minta; menambahkan segala macam tanda yang menarik, pop-up, kustom dan foto. Namun klien menyebutkan bahwa mereka ingin menambah foto mereka tanpa membuatmu repot, atau memprogram dengan sendirinya. Ini adalah dimana Flickr API berguna.

Flickr API menyediakan Flickr website sebagai pusat databasemu atau area penyimpanan fotomu. Menggunakan Flickr API, kamu dapat mengambil fotomu dari Flickr dan memajang mereka, di tempat lain, dan di Google map mu. Setiap kali kamu dan klien mu menambah foto ke akunmu pada website Flickr, Google map mu akan secara otomatis terupdate.

Jika kamu melihat demo-nya, Fotonya akan muncul ketika kamu menekan tombol "Smaller events" yang diambil dari sebuah akun Flickr yang telah aku tujukan untuk tutorial ini. Atau, jika kamu melihat Portsmouth History map ku, fotonya muncul ketika kamu menekan tombol Old Photographs (menu kanan) semua ditarik dari Flickr.

Flickr API sebenarnya membolehkanmu melakukan lebih daripada mengambil fotomu dari akunmu. Itu memberikanmu kemampuan untuk membuat pertanyaan yang kompleks pada metadata, mengambil foto dari semua pengguna Flickr. Ini memberimu alat yang sangat hebat yang dapat kamu gunakan untuk berbagai macam kegunaan menarik dan kreatif. Kelemahannya, adalah kemampuan API yang luas bisa membuatnya sedikit menakutkan jika kamu belum pernah menggunakannya sebelumnya, dan sulit untuk mengetahui darimana memulai. Dengan pemikiran ini, tutorial ini berfokus pada contoh mengambil foto dari akun Flickr mu sendiri, memberikan jalan pintas yang lengkap. Setelah kamu memahaminya, kamu harus bisa memanfaatkan API.

Tutorial ini dibuat berdasarkan tutorial sebelumnya, yang semakin kreatif dengan Google Maps API dan membuat lapisan kustom, dengan menjelaskan bagaimana Anda menghubungkan API Flickr dengan Google Maps API.

Pengingat Cepat Tentang API

API, atau Application Programming Interface, adalah cara yang bagus untuk menentukan sekumpulan perintah, yang diterbitkan oleh perusahaan (misalnya Facebook, Twitter, You Tube, Flickr), yang memungkinkan seseorang membuat versi konten yang dapat di kustom. Ketika orang membicarakan 'mash-up' mereka berarti telah menggunakan API dari dua atau lebih perusahaan untuk menggabungkan konten. Ada ribuan API ; lihatlah situs Programmable Web untuk daftarnya.

Tutorial pertama melihat bagaimana Google Maps API memungkinkan Kamu melakukan berbagai hal, termasuk menyesuaikan warna, tkamu peta, gaya kotak pop-up, tingkat detail, tingkat zoom. API Flickr sama luasnya.

Memulai Dengan API

Untuk memulai API Flickr Kamu perlu membuat akun Flickr, lalu tambahkan beberapa foto ke akun Kamu sehingga Kamu memiliki sesuatu untuk dikerjakan. Cobalah untuk menggunakan beberapa gambar dari lokasi yang berbeda (ini akan menjadi penting nanti). Gambar yang digunakan dalam tutorial ini tersedia di file sumber pada bagian atas halaman ini.

Catatan: Jika Kamu menggunakan gambar ini, hargai pencipta aslinya, cantumkan pada bagian bawah halaman ini.

Setelah Kamu memiliki beberapa konten untuk dikerjakan, saatnya untuk memulai API. Ini adalah beberapa situs utama.

Panduan pengembang Flickr API. Ini adalah semacam 'panduan awal'.
Dokumentasi Flickr API. Ini mencantumkan semua metode API (yaitu semua yang dapat Kamu lakukan dengan API), format yang dapat Kamu gunakan untuk meminta data, dan format data dapat dikembalikan. Tandai halaman ini!
Halaman bantuan API Flickr.

Sebelum Kamu bisa memulai, hal pertama yang perlu Kamu lakukan adalah mendapatkan kunci API mu sendiri. Catat ini; Kamu akan membutuhkannya nanti!

'Hello World' dari Flickr API

Lihatlah contoh sederhana ini; menggunakan Flickr API untuk mengambil foto dari akun Flickr yang saya buat untuk tutorial ini. daripada membuat daftar cuplikan kode yang terisolasi di sini, ini lebih berguna jika Kamu melihat kode untuk keseluruhan situs web untuk melihat bagaimana segalanya bekerja sama. Buka contoh sederhana, klik kanan pada halaman dan pilih view source. Atau download sumber dari atas halaman ini dan pisahkan.

Komentar dalam kode sumber memberikan penjelasan rinci, namun perlu dipandu untuk beberapa area penting.

URL

Yang paling penting untuk dipahami adalah bagaimana Kamu mengakses Flickr API menggunakan URL khusus. Kamu membuat URL ini untuk 'meminta' data yang Kamu cari. Bagian pertama dari URL ini adalah –

1	http://api.flickr.com/services/rest/

Kamu kemudian menambahkan sesuatu untuk menentukan apa yang Kamu cari. Hal pertama yang Kamu tambahkan adalah metode -

1	http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos

Kamu kemudian menambahkan argumen dan format yang Kamu butuhkan, yang memiliki & tkamu di antara masing-masing -

1	http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?

Argumen user_id adalah akun yang ingin Kamu ambil dari foto. Gunakan idGettr untuk menyelesaikannya.
api_key adalah kode yang Kamu dapatkan pada langkah sebelumnya. Kamu dapat membuat URL ini secara manual dengan melihat dokumentasi untuk metode yang Kamu pilih, misal. flickr.people.getPublicPhoto, tapi ini terkesan datar.

URL Wizard

Untungnya, Flickr menawarkan link ke wizard berguna (disebut API Explorer) di bagian bawah setiap halaman 'metode'. Sebuah kata peringatan sekalipun; Secara default, URL yang dihasilkan oleh wizard memiliki 'nojsoncallback = 1' di bagian akhir. Karena kita perlu mendorong hasilnya kedalam sebuah fungsi, dalam kasus kita akhirnya seharusnya 'nojsoncallback =?' (Lihat format respons JSON untuk lebih jelasnya).

Example of creating the URL that calls the Flickr API — Contoh pembuatan URL yang memanggil Flickr API.

Jadi, untuk membuat URL yang memanggil API Flickr, Kamu harus: -

Buka homepage Dokumentasi API Flickr dan pilih metodenya (dari daftar di sebelah kanan) yang ingin Kamu gunakan.
Kemudian pada halaman 'metode' (misalnya flickr.people.getPublicPhoto), perhatikan lebih dekat deskripsi dan detailnya untuk memastikan ini untukmu. Kemudian gulir ke bawah ke bagian bawah halaman dan klik pada link API explorer.
Pada halaman penjelajah API, isi informasi yang relevan tentang argumen, lalu gulir ke bawah. Pilih output JSON. (Lebih lanjut tentang format output nanti). Dan, pilih Do not sign call?' Karena kami melihat data publik. Kemudian klik tombol Call Method (atas)
Lihatlah bagian bawah layar sekarang. Kamu seharusnya melihatn itu ditampilkan dengan hasil kueri Kamu. Dan, tepat di akhir, ada URL yang Kamu butuhkan!
Jika Kamu menyalin URL ini ke browser Kamu, Kamu benar-benar akan melihat hasil kueri. Mereka seringkali agak sulit dibaca, tapi jika Kamu menyalin hasilnya ke JSON Formatter maka semua akan terungkap. Seperti disebutkan di atas, sebelum menggunakan URL ini untuk menghubungi Flickr dari dalam halaman web mu sendiri, ubah akhir ke 'nojsoncallback =?', Dan ingat untuk mengganti argumen api_key dengan kuncimu sendiri.

1	$.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=YOUR_FLICKR_API_KEY_HERE&user_id=YOUR_FLICKR_ID_HERE&format=json&jsoncallback=?", displayImages1);

Tangkap Hasilnya

Setelah Kamu membuat URL yang memanggil API Flickr, kami memerlukan cara untuk menangkap hasilnya. Kami melakukan ini dengan menggunakan metode jQuery $.getJSON. Metode $ .getJSON dibaca dalam data yang ada dalam format JSON (misalnya di bawah) dan memanggil fungsi (dalam kasus ini displayImages1), yang memproses data dengan cara tertentu (dalam hal ini menampilkan gambar pada halaman web).

The data in JSON format retrieved from this example Only the information about the first two photos is visible in this screen shot — Data (dalam format JSON) diambil dari contoh ini. (Hanya informasi tentang dua foto pertama yang terlihat di screen shot ini).

Tunggu - Apa sebenarnya JSON itu?

Sementara kita membahas masalah JSON, ada gunanya menunjukkan bahwa JSON hanyalah cara memformat atau menyusun informasi sehingga komputer dapat membacanya. Jika Kamu melihat output JSON (di atas), Kamu dapat melihat bagaimana kode tersebut mengakses setiap bit data. Jadi, misalnya, data.photos.photo (lihat di displayImages1 fungsi dalam kode sumber dari contoh sederhana) adalah mengarahkan javaScript ke dalam susunan photo di JSON dimana sebagian besar informasi disimpan. Kemudian, misalnya, var photoID = item.id; adalah mengakses elemen id untuk setiap foto.

Satu Contoh Terakhir: Anak Kucing

Sebelum melanjutkan, ada baiknya melihat sekilas contoh lain. Mari kita merangkul tujuan utama internet (yaitu berbagi gambar kucing) dan temukan gambar yang ditkamui dengan kata 'kitten'.

To Jump or Not to Jump by William Leiwakabessy — Lompat atau Tidak, oleh William Leiwakabessy

Untuk memaksimalkan kemampuan menemukan anak kucing kita, kali ini kita ingin mencari foto yang diunggah oleh semua orang. Jadi langkah pertama adalah membuat kueri API Flickr, yang terlihat seperti ini.

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?

Panggilan API ini menggunakan metode flickr.photos.search. URL ini kemudian dimasukkan ke dalam metode $.getJSONdan diproses dengan cara yang mirip dengan contoh pertama. Lihatlah contoh langsung untuk melihat hasilnya. Kode sumber tersedia dari link di bagian atas halaman ini.

Setelah melihat kedua contoh tersebut, Kamu harus menggunakan API untuk mengambil gambar Kamu sendiri dari akun Flickr Kamu dan menampilkannya di halaman web.

Pucuk dari Gunung Es!

Sikat pertama Kamu dengan Flickr API seharusnya melengkapi Kamu dengan prinsip-prinsip kunci tentang cara kerjanya. Namun, kemungkinan besar Kamu sudah mulai memperhatikan seberapa besar itu!

Ini bukan hal yang buruk karena menyediakan beragam kemungkinan. Gunakan dokumentasi API seperti semacam 'daftar belanja'. Luangkan waktu untuk melihat-lihat metode (tercantum di sebelah kanan halaman depan dokumentasi API) untuk melihat yang ditawarkan.

Kamu mungkin juga memperhatikan berbagai format permintaan (misalnya, kita menggunakan 'rest' - seperti yang ditunjukkan oleh kata di URL yang memanggil API - di atas), format tanggapan (misalnya, kita menggunakan JSON), dan bahasa pemrograman yang dapat Kamu gunakan dengan API (misalnya kita menggunakan JavaScript). Sekali lagi, ini adalah kekuatan API karena itu berarti konten dari Flickr dapat dikirim ke banyak aplikasi yang berbeda.

Kombinasi yang digunakan dalam tutorial ini dipilih karena ini adalah kombinasi yang bagus untuk memulai saat mempelajari tentang Flickr API, dan karena ini adalah kombinasi logis saat menghubungkan API ini dengan JavaScript berbasis Google Maps API. Masih layak untuk melihat opsi lain yang ada di sisi kiri halaman home dokumentasi API.

Penanda Geografis

Keindahan Flickr adalah Kamu dapat mengedit semua jenis data meta untuk setiap foto.

Setting the location of a photo within Flickr — Mengatur lokasi foto dalam Flickr.

Sedikit yang kita minati di sini adalah lokasi geografis masing-masing foto, dan mudah untuk mengaturnya untuk setiap gambar:

Masuklah ke akun Flickr mu.
Klik 'You' di kiri atas.
Klik pada ikon menu (tiga lingkaran kecil berturut-turut) di kanan bawah.
Klik 'Add to map'. Kemudian ikuti petunjuk di layar. Flickr secara otomatis bekerja dan menyimpan garis lintang dan bujur untuk setiap foto.

Kamu perlu mengulangi proses ini untuk setiap foto Kamu.

Membuat Flickr dan Google maps mashup.

Setelah Kamu memberi tanda geografis foto di Flickr, Kamu dapat menampilkannya di peta Google. Klik di sini untuk melihat live demo lalu klik kanan untuk melihat source code.

Simple Flickr and Google maps mashup — Flickr dan Google maps mashup.

Demikian pula dengan contoh sebelumnya, komentar dalam kode sumber memberikan penjelasan rinci. Namun, perlu disorot beberapa poin kunci. Pertama, untuk membuat URL yang memanggil API Flickr, kita menggunakan flickr.photos.search lagi. Kali ini kami memasukkan argumen has_geo=1 dan extras=geo untuk memastikan garis lintang dan bujur untuk setiap gambar juga disertakan dalam hasil. Untuk melihat hasil URL yang memanggil API Flickr, salinlah (di bawah) ke browser Kamu dan kemudian gunakan Formatter JSON untuk melihat hasilnya dengan lebih jelas.

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&has_geo=1&extras=geo&format=json&jsoncallback=?

Juga, ini layak ditunjukkan bahwa saat kode JavaScript dilewati melalui gambar, Google Maps juga menggunakan peta untuk membuat tanda peta menggunakan nilai lintang dan bujur dari API Flickr. Kemudian, di dalam tag tubuh, Google Maps API digunakan untuk membuat peta itu sendiri.

Kamu harus bisa menciptakan sesuatu yang serupa dengan menggunakan gambar Kamu sendiri yang Kamu muat ke Flickr. Situs iTouchMap berguna untuk mengetahui titik pusat peta Kamu.

Flickr dan Peta Festival Inggris kami

Semua yang masih harus dilakukan sekarang, adalah dengan mengambil semua yang tercakup dalam tutorial ini dan menerapkannya ke Peta Festival Inggris yang telah kami bangun dari tutorial pertama dan kedua dalam rangkaian ini.

google_maps_api_festival_map_with_flickr_600

Inilah hal yang kita inginkan. Jika Kamu mengklik tombol “Smaller events”, Kamu akan melihat gambar yang diambil dari Flickr.

Untuk kelengkapan saya juga menambahkan gambar, yang bukan berasal dari Flickr, ke ikon “main festival”. Selain itu, Kamu dapat melihat berbagai opsi dalam bentuk kotak pop-up, saya telah menggunakan 'info boxes' (untuk 'festival utama') dan 'info windows' default untuk foto-foto dari Flickr.

Peta ini dibuat dengan membuat beberapa tweak pada kode dari tutorial sebelumnya, dan menambahkan kode dari mashup Google Maps dan Flickr (atas). Kami pertama kali membuat variabel (smallEventsToggle) untuk menahan penkamu 'peristiwa kecil' atau tidak. Dan, kemudian buat opsi baru di fungsi handelRequests untuk mengatasi situasi saat tombol “small events” (smallEvents) diklik. Akhirnya, kode dari langkah sebelumnya ditambahkan dan beberapa sentuhan akhir dibuat, seperti mengubah penkamu peta default.

Seperti biasa, untuk mengosongkan cuplikan besar Kamu dalam tutorial, komentar dalam kode sumber yang dapat didownload memberikan penjelasan rinci.

Apa Selanjutnya?

Tutorial selanjutnya akan melihat optimasi, desain responsif, debugging dan testing.

Kredit Gambar

Kredit untuk foto pada tanda peta dapat ditemukan di akhir tutorial pertama.