Google Maps Dasar
Buat Google Map Dasar
Contoh ini membuat Google Map yang berpusat di London, Inggris:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
Sisa halaman ini menjelaskan contoh di atas, langkah demi langkah.
Wadah dan Ukuran Peta
Peta membutuhkan elemen HTML untuk menyimpan peta:
<div id="googleMap" style="width:100%;height:400px"></div>
Juga mengatur ukuran peta.
Buat Fungsi untuk Mengatur Properti Peta
function myMap() {
var mapProp = {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
Variabel mapProp mendefinisikan properti untuk peta.
Properti center menentukan tempat untuk memusatkan peta (menggunakan koordinat lintang dan bujur).
Properti zoom menentukan tingkat zoom untuk peta (cobalah bereksperimen dengan tingkat zoom).
Baris: var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); membuat peta baru di dalam elemen <div> dengan id="googleMap", menggunakan parameter yang diteruskan (mapProp).
Beberapa Peta
Contoh di bawah ini mendefinisikan empat peta dengan tipe peta yang berbeda:
Contoh
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
Kunci Google API Gratis
Google mengizinkan situs web untuk memanggil Google API apa pun secara gratis, ribuan kali sehari.
Buka https://developers.google.com/maps/documentation/javascript/get-api-key untuk mempelajari cara mendapatkan kunci API.
Google Maps berharap menemukan kunci API di parameter kunci saat memuat API:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>