Tutorial lengkap Google Maps Bahasa indonesia

Tutorial lengkap Google Maps Bahasa indonesia

Tutorial lengkap Google Maps Bahasa indonesia

Halo selamat datang di blog LKP Naura, kali ini kami akan membagikan Tutorial lengkap Google Maps Bahasa indonesia simak langkah langkahnya di bawah ini

Apakah Google Maps itu?

Google Maps adalah layanan pemetaan web gratis dari Google yang menyediakan berbagai jenis informasi geografis. Menggunakan Google Maps, seseorang bisa.

  • Telusuri tempat atau dapatkan petunjuk arah dari satu tempat ke tempat lain.
  • Lihat dan navigasi melalui gambar tingkat jalan panorama horizontal dan vertikal dari berbagai kota di seluruh dunia.
  • Dapatkan informasi spesifik seperti lalu lintas pada titik tertentu.

Google Maps menyediakan API yang dapat digunakan untuk menyesuaikan peta dan informasi yang ditampilkan di dalamnya. Bab ini menjelaskan cara memuat Peta Google sederhana pada halaman web Anda menggunakan HTML dan JavaScript.

Langkah-langkah untuk Memuat Peta di Halaman Web

Ikuti langkah-langkah yang diberikan di bawah ini untuk memuat peta di halaman web Anda –

Langkah 1: Buat Halaman HTML

Buat halaman HTML dasar dengan tag kepala dan badan seperti yang ditunjukkan di bawah ini –

<!DOCTYPE html>
<html>
<head>
</head>
<body>
..............
</body>
</html>

 

Langkah 2: Tambahkan API Javascript Google Maps

Muat atau sertakan Google Maps API menggunakan tag script seperti yang ditunjukkan di bawah ini –

<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>

</head>

<body>

..............

</body>
</html>

 

Langkah 3: Buat Penampung

Untuk menyimpan peta, kita harus membuat elemen kontainer, umumnya tag <div> (wadah umum) digunakan untuk tujuan ini.¬†Buat elemen kontainer dan tentukan dimensinya seperti yang ditunjukkan di bawah ini –

<div id = "sample" style = "width:900px; height:580px;"></div>

 

Langkah 4: Opsi Peta

Sebelum menginisialisasi peta, kita harus membuat objek mapOptions (dibuat seperti literal) dan menetapkan nilai untuk variabel inisialisasi peta. Sebuah peta memiliki tiga pilihan utama, yaitu center , zoom , dan maptypeid .

  • center¬†– Di bawah properti ini, kita harus menentukan lokasi di mana kita ingin memusatkan peta.¬†Untuk meneruskan lokasi, kita harus membuat¬†objek¬†LatLng¬†dengan meneruskan garis lintang dan bujur dari lokasi yang diperlukan ke konstruktor.
  • zoom¬†– Di bawah properti ini, kita harus menentukan tingkat zoom peta.
  • maptypeid¬†– Di bawah properti ini, kita harus menentukan tipe peta yang kita inginkan.¬†Berikut adalah jenis peta yang disediakan oleh Google –
    • ROADMAP (normal, peta 2D default)
    • SATELIT (peta fotografi)
    • HYBRID (kombinasi dari dua atau lebih jenis lainnya)
    • TERRAIN (peta dengan gunung, sungai, dll.)

Dalam sebuah fungsi, katakanlah, loadMap () , buat objek mapOptions dan setel nilai yang diperlukan untuk center, zoom, dan mapTypeId seperti yang ditunjukkan di bawah ini.

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.240498, 82.287598),

zoom:9,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

}

 

Langkah 5: Buat Objek Peta

Anda dapat membuat peta dengan membuat instance kelas JavaScript yang disebut Peta . Saat membuat instance kelas ini, Anda harus meneruskan wadah HTML untuk menampung peta dan opsi peta untuk peta yang diperlukan. Buat objek peta seperti yang ditunjukkan di bawah ini.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

 

Langkah 6: muat peta

Terakhir, muat peta dengan memanggil metode loadMap () atau dengan menambahkan pemroses DOM.

google.maps.event.addDomListener(window, 'load', loadMap);

 

or

<body onload = "loadMap()">

 

Contoh

Contoh berikut menunjukkan cara memuat peta jalan kota bernama Vishakhapatnam dengan nilai zoom 12.

<!DOCTYPE html>

<html>




<head>

<script src = "https://maps.googleapis.com/maps/api/js"></script>




<script>

function loadMap() {




var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:12,

mapTypeId:google.maps.MapTypeId.ROADMAP

};




var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

}




google.maps.event.addDomListener(window, 'load', loadMap);

</script>




</head>




<body>

<div id = "sample" style = "width:580px; height:400px;"></div>

</body>




</html>

 

Pada bab sebelumnya, kita membahas bagaimana memuat peta dasar. Di sini, kita akan melihat bagaimana memilih tipe peta yang dibutuhkan.

Jenis Peta

Google Maps menyediakan empat jenis peta.¬†Mereka adalah –

  • ROADMAP¬†– Ini adalah tipe default.¬†Jika Anda belum memilih jenis apa pun, ini akan ditampilkan.¬†Ini menunjukkan tampilan jalan dari wilayah yang dipilih.
  • SATELIT¬†– Ini adalah tipe peta yang menampilkan citra satelit dari wilayah yang dipilih.
  • HYBRID¬†– Jenis peta ini menunjukkan jalan-jalan utama pada citra satelit.
  • TERRAIN¬†– Ini adalah tipe peta yang menunjukkan medan dan vegetasi

Sintaksis

Untuk memilih salah satu tipe peta ini, Anda harus menyebutkan id tipe peta masing-masing dalam opsi peta seperti yang ditunjukkan di bawah ini –

var mapOptions = {

mapTypeId:google.maps.MapTypeId.Id of the required map type

};

 

Peta jalan

Contoh berikut menunjukkan cara memilih peta tipe ROADMAP –

<!DOCTYPE html>

<html>




<head>

<script src = "https://maps.googleapis.com/maps/api/js"></script>




<script>

function loadMap() {




var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:9,

mapTypeId:google.maps.MapTypeId.ROADMAP

};




var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

}




google.maps.event.addDomListener(window, 'load', loadMap);

</script>




</head>




<body>

<div id = "sample" style = "width:580px; height:400px;"></div>

</body>




</html>

 

Ini akan menghasilkan keluaran sebagai berikut –

Satelit

Contoh berikut menunjukkan cara memilih peta tipe SATELIT –

<!DOCTYPE html>

<html>




<head>

<script src = "https://maps.googleapis.com/maps/api/js"></script>




<script>

function loadMap() {




var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:9,

mapTypeId:google.maps.MapTypeId.SATELLITE

};




var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

}




google.maps.event.addDomListener(window, 'load', loadMap);

</script>




</head>




<body>

<div id = "sample" style = "width:580px; height:400px;"></div>

</body>




</html>

 

Ini akan menghasilkan keluaran sebagai berikut –

Hibrida

Contoh berikut menunjukkan cara memilih peta tipe HYBRID –

<!DOCTYPE html>

<html>




<head>

<script src = "https://maps.googleapis.com/maps/api/js"></script>




<script>

function loadMap() {




var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:9,

mapTypeId:google.maps.MapTypeId.Hybrid

};




var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

}




google.maps.event.addDomListener(window, 'load', loadMap);

</script>




</head>




<body>

<div id = "sample" style = "width:580px; height:400px;"></div>

</body>

</html>

 

Medan

Contoh berikut menunjukkan cara memilih peta tipe TERRAIN –

<!DOCTYPE html>

<html>




<head>

<script src = "https://maps.googleapis.com/maps/api/js"></script>




<script>

function loadMap() {




var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:9,

mapTypeId:google.maps.MapTypeId.TERRAIN

};




var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

}




google.maps.event.addDomListener(window, 'load', loadMap);

</script>




</head>




<body>

<div id = "sample" style = "width:580px; height:400px;"></div>

</body>




</html>

 

Ini akan menghasilkan keluaran sebagai berikut –

Google Maps – Zoom

Naikkan / Turunkan Nilai Zoom

Anda dapat menambah atau mengurangi nilai zoom peta dengan memodifikasi nilai atribut zoom di opsi peta.

Sintaksis

Kita dapat menambah atau mengurangi nilai zoom peta menggunakan opsi zoom. Diberikan di bawah ini adalah sintaks untuk mengubah nilai zoom dari peta saat ini.

var mapOptions = {

zoom:required zoom value

};

 

Contoh: Zoom 6

Kode berikut akan menampilkan peta jalan kota Vishakhapatnam dengan nilai zoom 6.

<!DOCTYPE html>

<html>




<head>

<script src = "https://maps.googleapis.com/maps/api/js"></script>




<script>

function loadMap() {




var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:6,

mapTypeId:google.maps.MapTypeId.ROADMAP

};




var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

}

</script>




</head>




<body onload = "loadMap()">

<div id = "sample" style = "width:587px; height:400px;"></div>

</body>




</html>

 

Contoh: Zoom 10

Kode berikut akan menampilkan peta jalan kota Vishakhapatnam dengan nilai zoom 10.

<!DOCTYPE html>

<html>




<head>

<script src = "https://maps.googleapis.com/maps/api/js"></script>




<script>

function loadMap() {




var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:10,

mapTypeId:google.maps.MapTypeId.ROADMAP

};




var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

}

</script>




</head>




<body onload = "loadMap()">

<div id = "sample" style = "width:587px; height:400px;"></div>

</body>




</html>

 

Baca Juga  Langkah pertama memulai belajar Macro VBA Excel

Google Maps – Pelokalan

Secara default, nama kota dan nama opsi yang diberikan pada peta akan menggunakan bahasa Inggris. Jika diperlukan, kami juga dapat menampilkan informasi tersebut dalam bahasa lain. Proses ini dikenal sebagai pelokalan . Dalam bab ini, kita akan belajar cara melokalkan peta.

Melokalkan Peta

Anda dapat menyesuaikan (melokalkan) bahasa peta dengan menentukan opsi bahasa di URL seperti yang ditunjukkan di bawah ini.

<script src = "https://maps.googleapis.com/maps/api/js?language=id-ID"></script>

 

Contoh

Berikut adalah contoh yang menunjukkan cara melokalkan GoogleMaps. Di sini Anda dapat melihat peta jalan Jakarta yang dilokalkan ke bahasa Indonesia.

<!DOCTYPE html>

<html>

<head>

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>




<script>

function loadMap() {




var mapOptions = {

center:new google.maps.LatLng(6.870360, 101.645508),

zoom:9,

mapTypeId:google.maps.MapTypeId.ROADMAP

};




var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

}

</script>




</head>




<body onload = "loadMap()">

<div id = "sample" style = "width:580px; height:400px;"></div>

</body>

</html>

 

Keluaran

Ini akan menghasilkan keluaran sebagai berikut –

Google Maps – Kontrol UI

Google Maps menyediakan Antarmuka Pengguna dengan berbagai kontrol untuk memungkinkan pengguna berinteraksi dengan peta. Kami dapat menambahkan, menyesuaikan, dan menonaktifkan kontrol ini.

Kontrol Default

Berikut adalah daftar kontrol default yang disediakan oleh Google Maps –

  • Zoom¬†– Untuk menambah dan mengurangi tingkat zoom peta, kita akan memiliki slider dengan tombol + dan -, secara default.¬†Slider ini akan berada di pojok sisi kiri peta.
  • Geser¬†– Tepat di atas penggeser zoom, akan ada kontrol geser untuk menggeser peta.
  • Jenis Peta¬†– Anda dapat menemukan kontrol ini di pojok kanan atas peta.¬†Ini menyediakan opsi tipe peta seperti Satelit, Peta Jalan, dan Medan.¬†Pengguna dapat memilih salah satu dari peta ini.
  • Street view¬†– Di antara ikon pan dan penggeser zoom, kami memiliki ikon Pegman.¬†Pengguna dapat menyeret ikon ini dan menempatkannya di lokasi tertentu untuk mendapatkan tampilan jalannya.

Contoh

Berikut adalah contoh di mana Anda dapat mengamati kontrol UI default yang disediakan oleh Google Maps –

Menonaktifkan Kontrol Default UI

Kita dapat menonaktifkan kontrol UI default yang disediakan oleh Google Maps hanya dengan membuat nilai disableDefaultUI menjadi benar di opsi peta.

Contoh

Contoh berikut menunjukkan cara menonaktifkan kontrol UI default yang disediakan oleh Google Maps.

<!DOCTYPE html>

<html>




<head>

<script src = "https://maps.googleapis.com/maps/api/js"></script>




<script>

function loadMap() {




var mapOptions = {

center:new google.maps.LatLng(17.609993, 83.221436),

zoom:5,

mapTypeId:google.maps.MapTypeId.ROADMAP,

disableDefaultUI: true

};




var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

}

</script>




</head>




<body onload = "loadMap()">

<div id = "sample" style = "width:580px; height:400px;"></div>

</body>

</html>

 

Ini akan menghasilkan keluaran sebagai berikut –

Mengaktifkan / Menonaktifkan Semua Kontrol

Selain kontrol default ini, Google Maps juga menyediakan tiga kontrol lagi seperti yang tercantum di bawah ini.

  • Skala¬†– Kontrol Skala menampilkan elemen skala peta.¬†Kontrol ini tidak diaktifkan secara default.
  • Putar¬†– Kontrol Putar berisi ikon lingkaran kecil yang memungkinkan Anda untuk memutar peta yang berisi citra miring.¬†Kontrol ini muncul secara default di sudut kiri atas peta.¬†(Lihat Citra 45 ¬į untuk informasi lebih lanjut.)
  • Tinjauan¬†– Untuk menambah dan mengurangi tingkat zoom peta, kami memiliki slider dengan tombol + dan -, secara default.¬†Slider ini terletak di pojok kiri peta.

Di opsi peta, kami dapat mengaktifkan dan menonaktifkan kontrol apa pun yang disediakan oleh Google Maps seperti yang ditunjukkan di bawah ini –

{

panControl: boolean,

zoomControl: boolean,

mapTypeControl: boolean,

scaleControl: boolean,

streetViewControl: boolean,

overviewMapControl: boolean

}

Contoh

Kode berikut menunjukkan cara mengaktifkan semua kontrol –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(19.373341, 78.662109),

zoom:5,

panControl: true,

zoomControl: true,

scaleControl: true,

mapTypeControl:true,

streetViewControl:true,

overviewMapControl:true,

rotateControl:true

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

</html>

Ini akan menghasilkan keluaran sebagai berikut –

Opsi Kontrol

Kita dapat mengubah tampilan kontrol Google Maps menggunakan opsi kontrolnya. Misalnya, kontrol zoom dapat diperkecil atau diperbesar ukurannya. Tampilan kontrol MapType dapat bervariasi menjadi bilah horizontal atau menu tarik-turun. Diberikan di bawah ini adalah daftar opsi Kontrol untuk Zoom dan kontrol MapType.

Sr.No. Nama Kontrol Opsi Kontrol
1 Kontrol zoom
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 Kontrol MapType
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

Contoh

Contoh berikut menunjukkan cara menggunakan opsi kontrol –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(19.373341, 78.662109),

zoom:5,

mapTypeControl: true,

 

mapTypeControlOptions: {

style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [

google.maps.MapTypeId.ROADMAP,

google.maps.MapTypeId.TERRAIN

]

},

 

zoomControl: true,

 

zoomControlOptions: {

style: google.maps.ZoomControlStyle.SMALL

}

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Kontrol Positioning

Anda dapat mengubah posisi kontrol dengan menambahkan baris berikut dalam opsi kontrol.

position:google.maps.ControlPosition.Desired_Position,

Berikut adalah daftar posisi yang tersedia di mana kontrol dapat ditempatkan pada peta –

  • TOP_CENTER
  • TOP_LEFT
  • KANAN ATAS
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • KIRI BAWAH
  • KANAN BAWAH
  • TENGAH BAWAH
  • KIRI BAWAH
  • KANAN BAWAH

Contoh

Contoh berikut menunjukkan bagaimana menempatkan kontrol MapTypeid di tengah atas peta dan bagaimana menempatkan kontrol zoom di tengah bawah peta.

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(19.373341, 78.662109),

zoom:5,

mapTypeControl: true,

 

mapTypeControlOptions: {

style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,

position:google.maps.ControlPosition.TOP_CENTER,

 

mapTypeIds: [

google.maps.MapTypeId.ROADMAP,

google.maps.MapTypeId.TERRAIN

]

},

 

zoomControl: true,

 

zoomControlOptions: {

style: google.maps.ZoomControlStyle.SMALL,

position:google.maps.ControlPosition.BOTTOM_CENTER

}

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Google Maps – Penanda

Kita dapat menggambar objek di peta dan mengikatnya ke garis lintang dan bujur yang diinginkan. Ini disebut overlay. Google Maps menyediakan berbagai overlay seperti yang ditunjukkan di bawah ini.

  • Spidol
  • Polyline
  • Poligon
  • Lingkaran dan persegi panjang
  • Jendela info
  • Simbol

Untuk menandai satu lokasi di peta, Google Maps menyediakan penanda . Penanda ini menggunakan simbol standar dan simbol ini dapat disesuaikan. Bab ini menjelaskan cara menambahkan penanda, dan cara menyesuaikan, menganimasikan, dan menghapusnya.

Menambahkan Penanda Sederhana

Anda dapat menambahkan marker sederhana ke peta di lokasi yang diinginkan dengan membuat instance kelas marker dan menentukan posisi yang akan ditandai menggunakan latlng, seperti yang ditunjukkan di bawah ini.

var marker = new google.maps.Marker({

position: new google.maps.LatLng(19.373341, 78.662109),

map: map,

});

Contoh

Kode berikut menetapkan penanda di kota Hyderabad (India).

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

Baca Juga  Cara menampilkan Grafik di excel

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(19.373341, 78.662109),

zoom:7

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

 

var marker = new google.maps.Marker({

position: new google.maps.LatLng(17.088291, 78.442383),

map: map,

});

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Menganimasikan Marker

Setelah menambahkan penanda ke peta, Anda dapat melangkah lebih jauh dan menambahkan animasi ke dalamnya seperti pantulan dan lepas . Cuplikan kode berikut menunjukkan cara menambahkan animasi pantulan dan jatuhkan ke penanda.

//To make the marker bounce`

animation:google.maps.Animation.BOUNCE

//To make the marker drop

animation:google.maps.Animation.Drop

Contoh

Kode berikut menetapkan penanda di kota Hyderabad dengan efek animasi tambahan –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(17.377631, 78.478603),

zoom:5

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

 

var marker = new google.maps.Marker({

position: new google.maps.LatLng(17.377631, 78.478603),

map: map,

animation:google.maps.Animation.Drop

});

}

</script>

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Menyesuaikan Marker

Anda dapat menggunakan ikon Anda sendiri alih-alih ikon default yang disediakan oleh Google Maps.¬†Cukup atur ikon sebagai¬†ikon: ‘ICON PATH’¬†.¬†Dan Anda bisa membuat ikon ini bisa diseret dengan menyetel¬†draggable: true¬†.

Contoh

Contoh berikut menunjukkan cara menyesuaikan penanda ke ikon yang diinginkan –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(17.377631, 78.478603),

zoom:5

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

 

var marker = new google.maps.Marker({

position: new google.maps.LatLng(17.377631, 78.478603),

map: map,

draggable:true,

icon:’/scripts/img/logo-footer.png’

});

 

marker.setMap(map);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Menghapus Marker

Anda bisa menghapus penanda yang sudah ada dengan menyiapkan penanda ke null menggunakan metode marker.setMap () .

Contoh

Contoh berikut menunjukkan cara menghapus penanda dari peta –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(17.377631, 78.478603),

zoom:5

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

 

var marker = new google.maps.Marker({

position: new google.maps.LatLng(17.377631, 78.478603),

map: map,

animation:google.maps.Animation.Drop

});

 

marker.setMap(null);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Google Maps – Bentuk

Di bab sebelumnya, kita mempelajari cara menggunakan penanda di Google Maps. Bersama dengan penanda, kita juga dapat menambahkan berbagai bentuk seperti lingkaran, poligon, persegi panjang, polylines, dll. Bab ini menjelaskan cara menggunakan bentuk yang disediakan oleh Google Maps.

Polyline

Polyline, disediakan oleh Google Maps, berguna untuk melacak jalur yang berbeda. Anda bisa menambahkan polyline ke peta dengan membuat instance kelas google.maps.Polyline . Saat membuat instance kelas ini, kita harus menentukan nilai yang diperlukan dari properti polyline seperti StrokeColor, StokeOpacity, dan strokeWeight.

Kita bisa menambahkan polyline ke peta dengan meneruskan objeknya ke metode setMap (MapObject) . Kita bisa menghapus polyline dengan meneruskan nilai null ke metode SetMap ().

Contoh

Contoh berikut menunjukkan polyline yang menyorot jalur antara kota Delhi, London, New York, dan Beijing.

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap(){

 

var mapProp = {

center:new google.maps.LatLng(51.508742,-0.120850),

zoom:3,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

 

var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);

 

var tourplan = new google.maps.Polyline({

path:[

new google.maps.LatLng(28.613939, 77.209021),

new google.maps.LatLng(51.507351, -0.127758),

new google.maps.LatLng(40.712784, -74.005941),

new google.maps.LatLng(28.213545, 94.868713)

],

 

strokeColor:”#0000FF”,

strokeOpacity:0.6,

strokeWeight:2

});

 

tourplan.setMap(map);

//to remove plylines

//tourplan.setmap(null);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “googleMap” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini akan menghasilkan keluaran sebagai berikut –

Poligon

Poligon digunakan untuk menyorot area geografis tertentu dari suatu negara bagian atau negara. Anda dapat membuat poligon yang diinginkan dengan membuat instance kelas google.maps.Polygon . Saat membuat instance, kita harus menentukan nilai yang diinginkan ke properti Polygon seperti path, strokeColor, strokeOapacity, fillColor, fillOapacity, dll.

Contoh

Contoh berikut menunjukkan cara menggambar poligon untuk menyorot kota Hyderabad, Nagpur, dan Aurangabad.

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap(){

 

var mapProp = {

center:new google.maps.LatLng(17.433053, 78.412172),

zoom:4,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

 

var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);

 

var myTrip = [

new google.maps.LatLng(17.385044, 78.486671),

new google.maps.LatLng(19.696888, 75.322451),

new google.maps.LatLng(21.056296, 79.057803),

new google.maps.LatLng(17.385044, 78.486671)

];

 

var flightPath = new google.maps.Polygon({

path:myTrip,

strokeColor:”#0000FF”,

strokeOpacity:0.8,

strokeWeight:2,

fillColor:”#0000FF”,

fillOpacity:0.4

});

 

flightPath.setMap(map);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “googleMap” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini akan menghasilkan keluaran sebagai berikut –

Persegi panjang

Kita dapat menggunakan persegi panjang untuk menyorot area geografis suatu wilayah atau negara bagian tertentu dengan menggunakan kotak persegi panjang. Kita bisa memiliki persegi panjang pada peta dengan membuat instance kelas google.maps.Rectangle . Saat membuat instance, kita harus menentukan nilai yang diinginkan ke properti persegi panjang seperti path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, dll.

Contoh

Contoh berikut menunjukkan cara menyorot area tertentu pada peta menggunakan persegi panjang –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap(){

 

var mapProp = {

center:new google.maps.LatLng(17.433053, 78.412172),

zoom:6,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

 

var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);

 

var myrectangle = new google.maps.Rectangle({

strokeColor:”#0000FF”,

strokeOpacity:0.6,

strokeWeight:2,

 

fillColor:”#0000FF”,

fillOpacity:0.4,

map:map,

 

bounds:new google.maps.LatLngBounds(

new google.maps.LatLng(17.342761, 78.552432),

new google.maps.LatLng(16.396553, 80.727725)

)

 

});

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “googleMap” style = “width:580px; height:400px;”></div>

</body>

</html>

Ini memberi Anda output berikut –

Lingkaran

Sama seperti persegi panjang, kita dapat menggunakan Lingkaran untuk menyorot area geografis suatu wilayah atau negara bagian tertentu menggunakan lingkaran dengan membuat instance kelas google.maps.Circle . Saat membuat instance, kita harus menentukan nilai yang diinginkan ke properti lingkaran seperti path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, dll.

Contoh

Contoh berikut menunjukkan cara menyorot area di sekitar New Delhi menggunakan lingkaran –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap(){

 

var mapProp = {

center:new google.maps.LatLng(28.613939,77.209021),

zoom:5,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

 

var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);

 

var myCity = new google.maps.Circle({

center:new google.maps.LatLng(28.613939,77.209021),

radius:150600,

 

Baca Juga  MENGENAL FUNGSI ICON PADA MICROSOFT WORD

strokeColor:”#B40404″,

strokeOpacity:0.6,

strokeWeight:2,

 

fillColor:”#B40404″,

fillOpacity:0.6

});

 

myCity.setMap(map);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “googleMap” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini akan menghasilkan keluaran sebagai berikut –

Google Maps – Jendela Info

Selain marker, poligon, polylines, dan bentuk geometris lainnya, kita juga dapat menggambar Jendela Info pada peta. Bab ini menjelaskan cara menggunakan Jendela Info.

Menambahkan Jendela

Jendela Info digunakan untuk menambahkan segala jenis informasi ke peta.¬†Misalnya, jika Anda ingin memberikan informasi tentang suatu lokasi di peta, Anda dapat menggunakan jendela info.¬†Biasanya jendela info dilampirkan ke penanda.¬†Anda dapat melampirkan jendela info dengan membuat instance¬†kelas¬†google.maps.InfoWindow¬†.¬†Ini memiliki properti berikut –

  • Konten¬†– Anda dapat mengirimkan konten Anda dalam format String menggunakan opsi ini.
  • position¬†– Anda dapat memilih posisi jendela info menggunakan opsi ini.
  • maxWidth¬†– Secara default, lebar jendela info akan direntangkan sampai teks dibungkus.¬†Dengan menentukan maxWidth, kita dapat membatasi ukuran jendela info secara horizontal.

Contoh

Contoh berikut menunjukkan cara menyetel marker dan menentukan jendela info di atasnya –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(17.433053, 78.412172),

zoom:5

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

 

var marker = new google.maps.Marker({

position: new google.maps.LatLng(17.433053, 78.412172),

map: map,

draggable:true,

icon:’/scripts/img/logo-footer.png’

});

 

marker.setMap(map);

 

var infowindow = new google.maps.InfoWindow({

content:”388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033″

});

 

infowindow.open(map,marker);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini akan menghasilkan keluaran sebagai berikut –

Google Maps – Simbol

Selain penanda, poligon, polylines, dan bentuk geometris lainnya, kita juga dapat menambahkan gambar (simbol) vektor yang telah ditentukan sebelumnya pada peta. Bab ini menjelaskan cara menggunakan simbol yang disediakan oleh Google Maps.

Menambahkan Simbol

Google menyediakan berbagai gambar (simbol) berbasis vektor yang dapat digunakan pada marker atau polyline.¬†Sama seperti overlay lainnya, untuk menggambar simbol yang telah ditentukan ini di peta, kita harus membuat instance kelasnya masing-masing.¬†Diberikan di bawah ini adalah daftar simbol yang telah ditentukan sebelumnya yang disediakan oleh Google dan nama kelasnya –

  • Lingkaran¬†– google.maps.SymbolPath.CIRCLE
  • Panah menunjuk mundur (ditutup)¬†– google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
  • Panah menunjuk ke depan (ditutup)¬†– google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  • Forward Pointing arrow (open)¬†– google.maps.SymbolPath.CIRCLE
  • Panah Menunjuk Mundur (open)¬†– google.maps.SymbolPath.CIRCLE

Simbol ini memiliki properti berikut – path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity, dan strokeWeight.

Contoh

Contoh berikut menunjukkan cara menggambar simbol yang telah ditentukan sebelumnya di Google Map.

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(17.433053, 78.412172),

zoom:5

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

 

var marker = new google.maps.Marker({

position: map.getCenter(),

 

icon: {

path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,

scale: 5,

strokeWeight:2,

strokeColor:”#B40404″

},

 

draggable:true,

map: map,

});

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Menganimasikan Simbol

Sama seperti penanda, Anda juga dapat menambahkan animasi seperti pantulan dan jatuhkan ke simbol.

Contoh

Contoh berikut menunjukkan bagaimana menggunakan simbol sebagai penanda pada peta dan menambahkan animasi padanya –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

function loadMap() {

 

var mapOptions = {

center:new google.maps.LatLng(17.433053, 78.412172),

zoom:5

}

 

var map = new google.maps.Map(document.getElementById(“sample”),mapOptions);

 

var marker = new google.maps.Marker({

position: map.getCenter(),

 

icon: {

path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,

scale: 5,

strokeWeight:2,

strokeColor:”#B40404″

},

 

animation:google.maps.Animation.DROP,

draggable:true,

map: map

});

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “sample” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Google Maps – Acara

Program JavaScript Google Maps dapat merespon berbagai event yang dibuat oleh pengguna. Bab ini memberikan contoh yang mendemonstrasikan cara melakukan penanganan peristiwa saat bekerja dengan Google Maps.

Menambahkan Pemroses Acara

Anda bisa menambahkan event listener menggunakan metode addListener () . Ia menerima parameter seperti nama objek yang ingin kita tambahkan pendengar, nama peristiwa, dan peristiwa penangan.

Contoh

Contoh berikut menunjukkan cara menambahkan event listener ke objek marker. Program ini menaikkan nilai zoom peta sebesar 5 setiap kali kita mengklik dua kali pada penanda.

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

var myCenter = new google.maps.LatLng(17.433053, 78.412172);

function loadMap(){

 

var mapProp = {

center: myCenter,

zoom:5,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

 

var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);

 

var marker = new google.maps.Marker({

position: myCenter,

title:’Click to zoom’

});

 

marker.setMap(map);

 

//Zoom to 7 when clicked on marker

google.maps.event.addListener(marker,’click’,function() {

map.setZoom(9);

map.setCenter(marker.getPosition());

});

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “googleMap” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Membuka Jendela Info di Klik

Kode berikut membuka jendela info saat mengklik penanda –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

var myCenter = new google.maps.LatLng(17.433053, 78.412172);

function loadMap(){

 

var mapProp = {

center:myCenter,

zoom:4,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

 

var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);

 

var marker = new google.maps.Marker({

position:myCenter,

});

 

marker.setMap(map);

 

var infowindow = new google.maps.InfoWindow({

content:”Hi”

});

 

google.maps.event.addListener(marker, ‘click’, function() {

infowindow.open(map,marker);

});

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “googleMap” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Ini menghasilkan output berikut –

Menghapus Pendengar

Anda bisa menghapus listener yang sudah ada menggunakan metode removeListener () . Metode ini menerima objek pendengar, oleh karena itu kita harus menetapkan pendengar ke variabel dan meneruskannya ke metode ini.

Contoh

Kode berikut menunjukkan cara menghapus pendengar –

<!DOCTYPE html>

<html>

 

<head>

<script src = “https://maps.googleapis.com/maps/api/js”></script>

 

<script>

var myCenter = new google.maps.LatLng(17.433053, 78.412172);

function loadMap(){

 

var mapProp = {

center:myCenter,

zoom:4,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

 

var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);

 

var marker = new google.maps.Marker({

position:myCenter,

});

 

marker.setMap(map);

 

var infowindow = new google.maps.InfoWindow({

content:”Hi”

});

 

var myListener = google.maps.event.addListener(marker, ‘click’, function() {

infowindow.open(map,marker);

});

 

google.maps.event.removeListener(myListener);

}

</script>

 

</head>

 

<body onload = “loadMap()”>

<div id = “googleMap” style = “width:580px; height:400px;”></div>

</body>

 

</html>

Demikianlah artikel tentang Tutorial lengkap Google maps Bahasa Indonesia, semoga bermanfaat

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Need Help? Chat with us