Membuat & Menampilkan Marker Google Maps Di PHP

 

Hi Blogger...

Artikiel yg ini GJ mau membagikan cara membuat & menampilkan marker google maps di PHP Mysql. Menampilkan peta lokasi google maps berdasarkan titik koordinat latitude dan longitude suatu wilayah tertentu ditandai dengan marker google maps.

Ok kita mulai ya...

1.Buat Database

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

1. <script src="jquery-1.10.1.min.js"></script>
2. <script async defer
3. src="https://maps.googleapis.com/maps/api/js?key=YourAPIkey">
4. </script>
5. <script>
6. var marker;
7. function initialize() {
8. // Variabel untuk menyimpan informasi (desc)
9. var infoWindow = new google.maps.InfoWindow;
10. // Variabel untuk menyimpan peta Roadmap
11. var mapOptions = {
12. mapTypeId: google.maps.MapTypeId.ROADMAP
13. }
14. // Pembuatan petanya
15. var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
16. // Variabel untuk menyimpan batas kordinat
17. var bounds = new google.maps.LatLngBounds();
18. // Pengambilan data dari database
19. <?php
20. $query = mysql_query("SELECT * FROM tb_provinsi");
21. while ($data = mysql_fetch_array($query)) {
22. $nama =$data['nama_provinsi'];
23. $lat =$data['latitude'];
24. $lon =$data['longitude'];
25. echo ("addMarker($lat, $lon, '$nama');\n");
26. }
27. ?>
28. // Proses membuat marker
29. function addMarker(lat, lng, info) {
30. var lokasi = new google.maps.LatLng(lat, lng);
31. bounds.extend(lokasi);
32. var marker = new google.maps.Marker({
33. map: map,
34. position: lokasi
35. });
36. map.fitBounds(bounds);
37. bindInfoWindow(marker, map, infoWindow, info);
38. }
39. // Menampilkan informasi pada masing-masing marker yang diklik
40. function bindInfoWindow(marker, map, infoWindow, html) {
41. google.maps.event.addListener(marker, 'click', function() {
42. infoWindow.setContent(html);
43. infoWindow.open(map, marker);
44. });
45. }
46. }
47. google.maps.event.addDomListener(window, 'load', initialize);
48. </script>
49. <div id="map-canvas" class="col-sm-12" style="height:380px;"></div>

Kita membutuhkan Google Maps API Key. API Key ini dapat diperoleh secara mudah dan gratis menggunakan Akun Google. Dapatkan API Key DISINI

Demikian tips dari GJ moga bermanfaat ya...

Jika ada yang kurang dipahami, mari kita bahas bersama...