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 php mysql cara membuat marker google maps php mysql cara membuat marker google maps php mysql
  • cara membuat marker google maps php mysql

    Cara Membuat Marker Google Maps PHP MySQL


    Tutorial bagaimana cara membuat marker google maps dengan PHP dan database MySQL serta contoh data peta lokasi lengkap dapat download script source code dan panduan aplikasi web php 7 mysqli.
  • 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.

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: script marker google maps php mysqli, 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

jasa pasang iklan murah

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

OSMAN ARISAN2021-12-07, 09:43 am
ok banget
Khoirul2021-11-29, 14:48 pm
Mau tanya unutk Aplikasi SPPD brpa harga?
azob2021-11-25, 09:27 am
Aplikasi E_ dokumen apakah bisa custome?
yus2021-11-19, 08:54 am
berapa harga aplikasi cuti
ahya2021-11-17, 20:02 pm
harga aplikasi arsip surat brp??? bs bntu instal ga?
M. Taufik2021-11-17, 11:44 am
Saya tertarik dengan aplikasi data mahasiswa, tapi apakah bisa data mahasiswa nya dapat diisi sendiri?
man2021-11-11, 08:08 am
App cuti bisakah di+ fitur laporan rekap per cuti per pegawai dan rekap tahun lalu_ Utk tentukan bisa tidak dpt cuti lg
project2021-11-01, 12:14 pm
mba irene masi cari aplikasi arsip surat ?
Ari2021-10-31, 12:24 pm
saya tertarik aplikasi input data anggota_ boleh minta no hp yang bia saya hubungi? terimaksih
Ketut Wiyasa2021-10-22, 09:58 am
Biaya pembuatan aplikasi marketplace berbasis web
Budi H2021-10-06, 11:12 am
Saya tertarik dengan disain Sistem informasi Manajemen data anggota, bisa di custom untuk data UMKM?
Irene2021-10-05, 14:50 pm
Hai, saya tertarik dengan aplikasi arsip surat masuk dan keluar_ _ Berapa ya kira kira rincian biayanya?
adi2021-10-03, 17:16 pm
terima kasih tutorialnya sangat membantu
Abi2021-10-02, 01:48 am
hai saya tertarik dengan Program Aplikasi Input Data Anggota, ada telp yang bisa di hubungi ?
saya ertin2021-09-28, 15:07 pm
apakah saya bisa hosting yang data siswa
Indra2021-09-20, 14:39 pm
selamat siang, sy mau coba utk bikin startup peminjaman barang, apakah bisa di setup lokal server ?harga brp?ada limiter
Dimas Nurcah2021-09-16, 11:38 am
cara menampilkan ip versi 6 nya itu gimana min? saya coba scriptnya malah _ _ 1 _ Mohon sekali bantuannya min
dedi2021-09-11, 13:06 pm
sandi login untuk aplikasi absensi mas apa ya
Budi2021-09-09, 15:49 pm
Maaf ingin bertanya, harga untuk aplikasi sarpras dan simpeg berapa ya masing_ masingnya
SURATNO2021-09-03, 13:47 pm
saya ingin bikin aplikasi data rt rw apakah bisa di bantu
BUKHORI2021-08-23, 00:36 am
mohon info harga aplikasi input data anggota?
Bagas2021-08-12, 14:04 pm
Bagaimana saya bisa mendownload aplikasi E_ Skripsi
Bambang2021-07-29, 14:18 pm
Bisa di ganti namanya tidak ya mis Gudang backup arsip sat
Nirwan2021-07-29, 10:23 am
Program Aplikasi HRD Berbasis Web, berapa bos
Ghossani2021-07-23, 15:26 pm
Info harga Aplikasi Manajemen Anggota
Hanafi2021-07-22, 00:50 am
untuk website sekolah berapa
Bambang W 2021-06-30, 10:31 am
Untuk aplikasi stock barang, bisakah ada tambahan fitur multi gudang, dan kira kira berapakah harganya?
Warta2021-06-18, 00:24 am
Untuk biaya pembuatan aplikasi berbasis web untuk arsip berapa yah fee nya ?
parlin2021-06-11, 14:42 pm
berapa harga dan bisa gk di ganti menu sesui dengan kebutuhan untuk aplikasi data pegawai
Retno2021-06-04, 15:13 pm
utk aplikasi arsip dokumen kantor, harganya brp ya pak?
NOFAL2021-06-02, 20:57 pm
hallo, untuk aplikasi penjualan retail brp harganya? ini sistem bisnisnya source code di ksh atau cloud?
Ezi Fitriana2021-05-26, 21:42 pm
mohon info biaya buat aplikasi sistem informasi dan pelayanan online buat Kantor Desa
Sayuti2021-05-25, 15:06 pm
Mau tanya klo Biaya buat Aplikasi Penilaian Kinerja Atau SKP brp ya?
Farah Ghaida2021-05-20, 15:13 pm
maaf pa sy mau tanya biaya pembuatan aplikasi data kepegawaian
Rachma2021-05-08, 19:26 pm
Untuk program aplikasi arsip dokumen biayanya berapa ya? dan apakah ada pembatasan maksimal berapa kb per dokumen?
irvan2021-04-14, 11:00 am
saya ingin membeIi untuk instansi pemerintah saya, bagaimana pembeIiannya ya
dela2021-03-10, 10:23 am
ka untuk pembelian aplikasi manajemen anggota berapa budgetnya? dan mendapatkan source codenya tidak ya?
isna2021-02-26, 23:59 pm
saya minat Aplikasi pengajuan judul skripsi online bang_

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
cara membuat marker google maps php mysql