Cara Menampilkan Peta Dari Google
selamat siang untuk para pembaca :), kali ini saya akan memberikan tutorial cara menampilkan peta dari google, google sendiri sudah menyediakan function - function dan method - method untuk di gunakan user agar bisa menggunakan petanya. anda bisa menggunkan peta untuk informasi tempat anda berada atau bisa juga menampilkan data yang bergeotag dari database anda agar bisa di tampilkan di peta dalam bentuk marker.
ok, pertama buatlah project dengan nama terserah anda kemudian salin kode berikut dan simpan file dengan nama index.php
<!DOCTYPE html>sekarang jalankan project yang sudah di buat tadi di browser, anda akan mendapatkan tampilan peta dengan posisi tengahnya wilayah indonesia, anda bisa mengatur sendiri posisi tengahnya dengan mengganti latitude dan longitude pada new google.maps.LatLng(latitude,longitude), dan anda juga bisa mengganti type peta dengan mode satelit dengan mengganti google.maps.MapTypeId.ROADMAP dengan google.maps.MapTypeId.HYBRID
<html>
<head>
<title>MENAMPILKAN GMAPS</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function init(){
var info_window = new google.maps.InfoWindow();
// set level zoom
var zoom = 4;
// set latitude dan longitude
var pos = new google.maps.LatLng(-3.050444,116.323242);
// set opsi peta
var options = {
'center': pos,
'zoom': zoom,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
// buat peta
var map = new google.maps.Map(document.getElementById('maps'), options);
info_window = new google.maps.InfoWindow({
'content': 'loading...'
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="maps" style="width: 800px; height: 400px;"></div>
</body>
</html>
OK, sampai di sini dulu tutorial kali ini, selamat mencoba dan semoga bisa bermanfaat.
DONASI VIA PAYPAL
Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://apaitu10.blogspot.com/. Terima kasih.
Postingan Lebih Baru
Postingan Lebih Baru
Postingan Lama
Postingan Lama
Komentar