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

Arsya Rid2019-11-15, 13:21 pm
berapa harga raja rental v.2.0 dan bagaimana transaksinya?
Leslie Mccur2019-11-14, 11:09 am
How would you like to submit your ad on over 1000 ad sites every month? One tiny investment every month will get you vir
Ilanahmad2019-11-13, 09:31 am
Test! Apakah disini bisa melihat?
UNIVERSIT2019-11-12, 22:22 pm
halo
doni2019-11-12, 21:13 pm
brapa harga HRD 2.0
Karya Wap2019-11-12, 18:55 pm
Bang ada nggak yang berbentuk CD
panuluh2019-11-12, 15:57 pm
Program Aplikasi Cuti Online
agus2019-11-07, 11:31 am
selamat siang. bagaimana cara saya agr bisa login ke trial SIM-ASET?
Joyce 2019-11-06, 08:55 am
bergabung membuat PHP Database
jauhar2019-10-31, 11:14 am
ini harga berapa ya? trus bisa kah ditambah form pengajuan cuti?
rian2019-10-25, 13:46 pm
mau nanya utk pembelian program data karyawan bpr ya harganya
Hari2019-10-18, 20:38 pm
Berapa biaya untuk pembuatan aplikasi SPPD
silvani2019-10-18, 16:39 pm
aplikasi arsip digital berbasis web ini berapa ya kak?
Yunus2019-10-17, 15:55 pm
Harga aplikasi SPPD ini berapa ya
CIKWAN2019-10-13, 21:00 pm
berapa harga aplikasi SPPD versi 2
Roy2019-10-13, 10:58 am
Tanya aplikasi hrd ini
WIRA2019-10-04, 14:49 pm
kami berminat aplikasi simpeg versi 7...bagaimana cara mendapatkannya....dan berapa no WA nya. terima kasih
azis2019-10-03, 15:14 pm
bang saya mau bayar buat aplikasi dokumen kontrol
antosilat2019-10-01, 16:48 pm
mohon info untuk biaya custom aplikasi
doraemon2019-10-01, 15:29 pm
iya susah susah bikin aplikasi tapi ga sempurna
Lucas Weber2019-09-29, 00:31 am
Good Day, Lucas Weber Here from World Class Solutions, wondering can we publish your blog post over here? We are lo
sugeng cu2019-09-25, 13:35 pm
simpeg 7 berapa ya dan ke mana bayar nya
M Siagian2019-09-24, 01:50 am
Data base karyawan dan penggajian
L2019-09-19, 13:55 pm
cara mengurangi 2 date yang ada di database gmana sih ? gw error mlu!
Ruslan2019-09-18, 07:27 am
Brapa aplikasi Gaji Berkalanya bro ki
Ade Ruh2019-09-17, 07:49 am
Assalamualaikam , Berapa harga aplikasi SPPD yg terbaru?
Ridho2019-09-05, 09:00 am
Aplikasi untuk kepegawaian (simpeg) untuk sekolah ada?
willybass2019-08-27, 13:24 pm
om mo nanya aplikasi simpeg tu berapa biayanya
Chairudin2019-08-26, 18:41 pm
assalamu alikum , brapa harga aplikasi Simpegnya pa
JUMARIS2019-08-20, 11:14 am
maaf om mau nanya berapa harga aplikasi SIMPEG Versi 7 terbaru om
sandi mau2019-08-18, 12:57 pm
assalamualaikum om, om boleh bagi script aplikasi web dokumen kontrol? lagi butuh om. tolong dengan sangat
ibnul2019-08-15, 12:27 pm
kalau beli simpeg v7.0 seperti yang di demokan itu berapa gan?
alessio2019-08-10, 11:50 am
min untuk aplikasi sistem informasi pasar full saya harus gimana??
agung2019-07-31, 14:47 pm
tertarik dengan aplikasi simpeg Kemdikbud.. boleh email ke saya..
gita2019-07-20, 06:10 am
untuk aplikasi stok barang berbayar ya, di download ada paswordnya
Solekha2019-07-19, 16:33 pm
aplikasi cuti online katanya bs download gratis kka, boleh mnta link nya
andre2019-07-16, 12:40 pm
tertarik dengan aplikasi simpeg, bisa email saya utk harga dan penjelasan yg lebih detail? terima kasih
abraham2019-07-12, 12:46 pm
tes, cek aplikasi sppd
Muhamad T2019-07-01, 13:57 pm
Tidak Bisa Ke YouTube Dan Play Store
Toni2019-06-20, 14:27 pm
Saya tertarik dengan software simpeg. Berapa harganya? apakah sekali beli atau ada newer yearly? apakah termasuk s Codex
agus2019-06-20, 09:51 am
saya minat aplikasi e-arsip v4. berapa harga nya gan?
azis2019-06-18, 10:47 am
saya tertarik dengan aplikasi dokumen kantor
timmy2019-06-10, 15:46 pm
donasi Program Aplikasi HRD Berbasis Web berapa gan
zul2019-06-10, 13:31 pm
kak ini mau nyoba aplikasi live chat
Shevan2019-06-08, 09:10 am
Ia saya minta tolong buat aktifin akun google saya
Edyrianto2019-05-26, 20:28 pm
pak saya berminat dengan Aplikasi SPPD nya tp menu dan templatenya bisa dirubah dan ditambah sesuai dengan kebutuhan dgn
rido2019-05-24, 17:29 pm
gimna ya cara dapt aplikasi biodata mahasiswa
hein2019-05-24, 12:18 pm
cara membeli Arsip Digital ??
prayoga2019-05-18, 21:12 pm
harga simpeg versi 7 nya brp gan?
rhenald2019-05-03, 13:21 pm
om boleh tanya kalo mo beli aplikasi simpegnya berapa y harganya
Amri2019-04-02, 16:05 pm
klo saya pesan aplikasi absensi karyawan berapa lama dan harganya berapa?
khomsin2019-03-26, 01:16 am
mau pesan aplikasi sederhana,, mirip seperti aplikasi SIMPAS.. berapa lama yah
Benny2019-02-18, 09:27 am
berapa harga aplikasi cuti online? Apa tidak ada menu cetak form permohonan cuti?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 

cara membuat marker google maps php mysql