cara membuat marker google maps php mysql

share

  • cara membuat marker google maps php mysql

    Cara Membuat Marker Google Maps PHP MySQL


    Cara membuat marker Google Maps dengan PHP dan database MySQL beserta contoh data peta lokasi, lengkap dengan script source code tutorial dan panduan PHP MySQL
  • cara membuat marker google maps php mysql
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • cara membuat marker google maps php mysql
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • cara membuat marker google maps php mysql Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • cara membuat marker google maps php mysql
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Cara Membuat Marker Google Maps PHP MySQL

Pada kesempatan baik ini kami akan memberikan sebuah tutorial tentang bagaimana Cara Membuat Marker Google Maps PHP MySQL, menampilkan peta lokasi google maps berdasarkan titik koordinat latitude dan longitude suatu wilayah tertentu kemudian ditandai dengan marker google maps. Sebagai contoh adalah peta lokasi Jawa Tengah dengan koordinat latitude -7.150975 dan longitude 110.1402594, kemudian peta lokasi Jawa Barat dengan koordinat latitude -7.090911 dan longitude 107.668887. Nama provinsi, latitude, dan longitude tersebut harus kita insert terlebih dulu ke dalam database sebagai data, maka jika kita jalankan kode PHP dengan query MySQL memanggil data tersebut secara otomatis peta lokasi google maps provinsi akan tampil beserta markernya. Yap, peta lokasi Jawa Tengah dan Jawa Barat akan tampil dan masing-masing memiliki marker sendiri. Kurang lebih seperti itu deh, hehehe...

Tutorial cara membuat marker google maps PHP MySQL lengkap dengan script PHP, JavaScript dan query MySQL ini, kami lakukan pada sistem operasi Windows 7, menggunakan web server XAMPP ver 5.6.3 include dengan database MySQL, dan web browser Mozilla Firefox. Untuk mengikuti tutorial ini pastikan komputer anda telah completed install web server XAMPP tersebut.

Berikut langkah - langkah atau tutorial cara membuat marker google maps PHP MySQL yang semoga bermanfaat tentunya:

Cara Membuat Marker Google Maps PHP MySQL

1. Desain database beserta table dan atributnya, kemudian insert data sehingga memiliki data seperti gambar berikut;

cara membuat marker google maps php mysql
Cara Membuat Marker Google Maps PHP MySQL

2. Buat kode JavaScript dan PHP untuk menampilkan peta dan sekaligus membuat marker google maps. Ketik kodenya seperti berikut, simpan sebagai index.php

<script src="jquery-1.10.1.min.js"></script>
<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YourAPIkey">
</script>
<script>	
    var marker;
	function initialize() {  
		// Variabel untuk menyimpan informasi (desc)
		var infoWindow = new google.maps.InfoWindow;
		//  Variabel untuk menyimpan peta Roadmap
		var mapOptions = {
			mapTypeId: google.maps.MapTypeId.ROADMAP
        } 
		// Pembuatan petanya
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);      
        // Variabel untuk menyimpan batas kordinat
		var bounds = new google.maps.LatLngBounds();
		// Pengambilan data dari database
		<?php
			$query = mysql_query("SELECT * FROM tb_provinsi");
			while ($data = mysql_fetch_array($query)) {
				$nama	=$data['nama_provinsi'];
				$lat	=$data['latitude'];
				$lon	=$data['longitude'];
				echo ("addMarker($lat, $lon, '$nama');\n");                        
			}	
		?> 
		// Proses membuat marker 
		function addMarker(lat, lng, info) {
			var lokasi = new google.maps.LatLng(lat, lng);
			bounds.extend(lokasi);
			var marker = new google.maps.Marker({
				map: map,
				position: lokasi
			});       
			map.fitBounds(bounds);
			bindInfoWindow(marker, map, infoWindow, info);
		 }		
		// Menampilkan informasi pada masing-masing marker yang diklik
		function bindInfoWindow(marker, map, infoWindow, html) {
			google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
	}
	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" class="col-sm-12" style="height:380px;"></div>

Yuk kita bahas kode JavaScript dan PHP untuk membuat marker google maps di atas sedikit lebih detail agar mudah dipahami.

Pertama, kode pada baris 1 berikut;

<script src="jquery-1.10.1.min.js"></script>

Yap, kita membutuhkan jQuery-1.10.1, atau jQuery lainnya juga bisa, mari kita download jQuery tersebut

Kedua, kode pada baris 2-4 berikut;

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YourAPIkey">
</script>

Key=YourAPIkey..., teryata kita membutuhkan Google Maps API Key. API Key ini dapat diperoleh secara mudah dan gratis menggunakan Akun Google. Dapatkan API Key disini Google Maps API Key

Ketiga, kode pada baris 19-27 berikut;

<?php
	$query = mysql_query("SELECT * FROM tb_provinsi");
	while ($data = mysql_fetch_array($query)) {
		$nama	=$data['nama_provinsi'];
		$lat	=$data['latitude'];
		$lon	=$data['longitude'];
		echo ("addMarker($lat, $lon, '<b>$nama</b>');\n");                        
	}	
?> 

Di atas adalah kode PHP untuk membuat marker google maps, datanya kita ambil dari database MySQL yang telah kita insert sebelumnya, terdapat tiga atribut yang kita ambil yaitu, nama, latitude, dan longitude. Tentunya, kita bebas mengembangkan manipulasi query tersebut

Keempat, kode pada baris terakhir berikut;

<div id="map-canvas" class="col-sm-12" style="height:380px;"></div>

Di atas adalah kode HTML untuk menampilkan peta lokasi google maps, dengan id=map-canvas, id ini harus sama dengan id yang kita buat pada kode JavaScript di atas

3. Jalankan XAMPP kemudian aktifkan Apache dan MySQL. Kita jalankan script PHP dengan nama file index.php di atas, semoga hasilnya seperti berikut;

cara membuat marker google maps php mysql
Cara Membuat Marker Google Maps PHP MySQL

Tutorial Cara Membuat Marker Google Maps PHP MySQL

Download Marker Google Maps PHP


Marker Google Maps PHP

4. Selesai.

Sekian penjelasan dari kami tentang bagaimana Cara Membuat Marker Google Maps PHP MySQL, lengkap dengan tutorial scriptnya. Untuk mendapatkan source code nya Anda dapat langsung mendownload melalui link di atas, jika link download tidak aktif atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :


Cara Membuat Marker Google Maps PHP MySQL

Tags: marker google maps php mysql, membuat marker google maps, marker google maps, marker google maps php, cara membuat marker google maps php mysql


Reliable

cara membuat marker google maps php mysql

Advertise

cara membuat marker google maps php mysql

Payment & Donation

cara membuat marker google maps php mysql

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

cara membuat marker google maps php mysql

Account :

andihatmoko@gmail.com

Live Chat

ferry 2020-06-24, 13:51 pm
apakah saya bisa mendapatkan aplikasi SPPD exel sederhana
adam2020-06-24, 11:02 am
apakah bisa mengirimkan biaya pembuatan aplikasi E_arsip_ terima kasih
nina2020-06-23, 14:59 pm
siang_ _ _ untuk aplikasi pengarsipan adakah contoh pengarsipan di divisi internal audit_ _ _ saya mau lihat dahulu_ _ _
Shany2020-06-19, 20:43 pm
Untuk aplikasi persediaan ini apakah masih bisa di customize dengan warna dan ukuran?
adi2020-06-17, 22:15 pm
Assalamualaikum WRWB
Triyanto2020-06-17, 15:02 pm
Halo admin,,,saya tertarik dengan aplikasi cutinya,,harganya berapa
fadhil2020-06-17, 09:53 am
bisakan anda mengirimkan penawaran ke email saya tentang program aplikasi e_ arsip dan data pegawai
jiching2020-06-12, 14:40 pm
Untuk mendownload script live chat bgmn?
aa2020-06-08, 11:11 am
brp harga untuk aplikasi Program Aplikasi Inventory Barang Gudang
Budhi Dwipa2020-06-08, 10:48 am
halo admin saya tertarik dengan aplikasi simpeg 7 apakah ada nomor wa yg bisa dihubungi ?
abu hafidz2020-06-04, 14:23 pm
kalau untuk menampilkan hanya data yang ada di table lain gimana ya ? mohon bantuannya
Muhlis2020-06-04, 12:09 pm
saya berminat software pengajuan judul skripsi, saya ingin membahas harganya jida chat ini di respon ke Email
nic2020-06-04, 07:49 am
brp harga e_ arsip
NUR CAHYANIG2020-06-03, 15:20 pm
Berapa harga untuk software koperasi?
Arif Mahmudi2020-06-03, 11:00 am
Assalamualaikum
Shaiful A2020-05-27, 10:22 am
brp harga aplikasi koperasinya bro ? email me or call 08114700475
nanda2020-05-24, 22:34 pm
ini car ameliat cht pada code nya gmnya?
mugiarto2020-05-09, 08:33 am
bgmana cara beli program iin, apakah termasuk souce code nya ??
Muhammad Zae2020-04-30, 10:14 am
Bagaimana cara membeli aplikasi ini?
willbertus2020-04-28, 16:49 pm
Admin mohon info utk Aplikasi Dokumen Kantor gimana cara dapatnya secara komplit_ Minat_ thks
Galih2020-04-27, 23:18 pm
Min, bagaimana cara mendapatkan source code aplikasi cuti?
ariel2020-04-18, 11:02 am
kami berminat dgn aplikasi SPPD berapa harga gan?
Aris2020-04-12, 08:45 am
plikasi Arsip Surat Berbasis Web SIPAS harganya brp?dpt source code y
Wida Widiyaw2020-04-11, 12:01 pm
Ingin Mengubah Tanggal Lahir Akun Google
Zulfikri2020-04-10, 10:33 am
Mau tanya biayanya berapa kalau bikin aplikasi SPPD lengkap
willy2020-04-06, 22:59 pm
cara dapat password _ rar dari file aplikasi inventory barangnya gmn ?
Asih2020-03-16, 00:31 am
Bagaimana cara mendapatkan license office 365 ? Makasih
irfan2020-03-14, 10:18 am
selamat pagi pak,apa program sewa mobil ini bisa castem sesuai dengan kebutuhan kami
Aji2020-03-10, 11:39 am
Ini tidak bisa di download min?di info saat download ada notif untuk hubungi admin untuk download aplikasi hrd web
Hamdan2020-03-09, 16:05 pm
Berapa harga membuat aplikasi rental atau penyewaan kamera berbasis web?
rokbi2020-03-09, 09:19 am
kami berniat mau order aplikasi offline simpan pinjam cu? gmna cara dan berapa bugjed nya?
feliks hatam2020-03-07, 16:17 pm
konsultasi pemesanan blog
Fatimah2020-03-06, 14:40 pm
Berapa aplikasi KTP
Muhammad2020-02-26, 20:59 pm
Assalamualaikum min, cara mendapatkan aplikasi ini gmana ya min?
rizki firman2020-02-25, 12:05 pm
mau tanya untuk spk metode fuzzy berapa ya? tentang pemilihan tempat wisata
DAVID2020-02-15, 11:14 am
Aplikasi HRD brp gan_
Rendhi roman2020-02-13, 22:38 pm
Untuk Sistem Rekrutment BIsa_
windra2020-02-13, 14:43 pm
untuk harga program data karyawan brp
adam2020-02-13, 11:59 am
apakah ada aplikasi system harga pasar_
FERY DIANTA 2020-02-08, 09:51 am
gan mau nanya harga simpeg versi 7 nya_
rudy2020-02-07, 15:58 pm
berapa harga sw management anggota pak_
Manyu2020-02-07, 14:44 pm
berapa harga aplikasi sppd nya_ pls respon cepat melalui email ya, saya berminat mau beli
naomi2020-02-04, 15:08 pm
halo, untuk aplikasi e ktp nya ada kendala saat mendownload, mohon bantuannya
yadi2020-02-01, 19:34 pm
harga Aplikasi Simpan Pinjam Berapa
hendi 2020-01-25, 18:59 pm
untuk afk sofware developer property penjualan di harga berapa _
Abdurrahman 2020-01-25, 01:08 am
Tolong syarat dan ketentuan utk mendapatkan software koperasi jasa (bukan simpan pinjam) dan software UKM Terima kasih
Dinollah Rai2020-01-24, 11:37 am
aplikasi simpan pinjam tdk free kah
Suwarto plaz2020-01-21, 15:45 pm
berapa harga aplikasi cuti online?
Heri Nurjono2020-01-20, 09:45 am
Berapa harga Aplikasi data anggota?
riau2020-01-19, 19:49 pm
halo.... gan... bisa gak di ubah menjadi KTP menjadi SIM ?
wid2020-01-16, 13:26 pm
gan aplikasi simpeg bisakah kita download demonnya dulu

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
cara membuat marker google maps php mysql