Google Maps API

A. PENDAHULUAN

Pengertian

Google Maps adalah layanan pemetaan web yang dikembangkan olah google.

Latar Belakang

Ingin Mempelajari dan menggunakan google maps jika dibutuhkan dalam suatu website.

Maksud dan Tujuan

Mengerti tentang google maps api, dan dapat menerapkannya dalam suatu website.

B. ALAT DAN BAHAN

Text Editor
Web Browser
Koneksi Internet

C. HASIL YANG DIHARAPKAN

Dapat mengoptimalkan penggunaan google maps dalam suatu website.

D. PEMBAHASAN

Pengenalan

Google maps adalah layanan gratis dari google yang lumayan populer, dimana, dengan adanya google maps ini anda dapat menambahkan fitur google maps dalam web anda sendiri dengan Google Maps API. Google Maps adalah sebuah library JavaScript. Untuk mengikuti tutorial ini, anda hanya memerlukan pengetahuan mengenai HTML dan sedikit mengenai JavaScript. dan juga anda harus terkoneksi internet jika ingin mengikuti tutorial kali ini, karena Google Maps API kita tidak akan muncul jika tidak terkoneksi internet. dan hingga saat ini, Versi terakhir dari Google Maps API adalah v.3.

Cara Menggunakan Google Maps API

Pertama-tama anda memasukkan Maps API JavaScript kedalam HTML milik anda.
kemudian anda membuat elemen div (disini saya menggunakan nama peta_kanvas) untuk menampilkan peta.
Membuat beberapa objek literal untuk menyimpan property-property pada peta anda.
Menuliskan fungsi JavaScript untuk membuat objek peta.
Meng-inisiasi peta dalam tag <body> HTML dengan event onload.

Study Kasus

sebagai contohnya, disini saya akan menampilkan sebuah kota bernama kota caruban didalam Google Maps API codingan saya.

ketikkan script berikut untuk code nya :

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=AIzaSyB3yKlO7mjnmSUR3N12qXhjQWdySfmE520"></script>
<script type="text/javascript">
// Langkah 4
function initialize() {
var latlng = new google.maps.LatLng(-7.5621466,111.6086048,5731);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Langkah 3
var map = new google.maps.Map(document.getElementById("peta_kanvas"),
myOptions);
}
</script>
</head>

<body onload="initialize()">

<div id="peta_kanvas" style="width:1000px; height:600px"></div>
</body>
</html>

kemudian save dengan ekstensi html. dan buka pada browser anda, maka akan muncul tampilan seperti ini :

kemudian, jika anda tidak mengganti kode Google API Key nya, mungkin anda akan menemui masalah seperti ini :

Pertama tama, silakan simak untuk Kode Google API nya :

ganti tulisan bercetak biru diatas dengan kode yang akan anda dapatkan di link berikut.
klik disini untuk Google API key nya, maka anda akan menuju halaman berikut, klik GET A KEY :

Klik Create a New Project, pilih project anda, dan klik NEXT

Kemudian Copy Kode API nya, dan klik DONE

kemudian timpa script bercetak biru diatas dengan Kode API Key kalian.

Kemudian Yang kedua adalah script yang bercetak hijau, yang merupakan Latitude dan Longitude pada sebuah koordinat di google Map. anda dapat menggantinya dengan cara :

Buka Google Maps kalian
kemudian cari tempat yang ingin kalian tampilkan

kemudian perhatikan tulisan negatif, dan angka setelah koma, yang merupakan Latitude dan Longitude

kopi pastekan Latitude dan Longitudenya, dan timpa dengan script yang bercetak hijau.

Yang ke-3 adalah yaitu script yang bercetak merah. yang merupakan ukuran lebar dan panjang dari ukuran Google Maps nantinya, anda dapat mengaturnya sendiri.

E. TEMUAN PERMASALAHAN