{"id":45923,"date":"2024-03-14T15:37:39","date_gmt":"2024-03-14T08:37:39","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=45923"},"modified":"2024-03-27T11:55:43","modified_gmt":"2024-03-27T04:55:43","slug":"cara-membuat-map-di-laravel","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-map-di-laravel\/","title":{"rendered":"Cara Membuat Map di Laravel Melalui OpenStreetMap"},"content":{"rendered":"\n<p><a href=\"https:\/\/blog.rumahweb.com\/laravel-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"laravel adalah\">Laravel<\/a> adalah framework PHP yang populer di kalangan <em>developer <\/em>karena berbagai keunggulannya. Framework Laravel menawarkan berbagai fitur yang dapat mempercepat dan mempermudah proses pengembangan web, salah satunya adalah integrasi map atau peta. Dalam artikel ini, kami akan berbagi cara membuat map di Laravel dengan OpenStreetMap.<\/p>\n\n\n\n\n\n<p>Maps pada website berfungsi sebagai informasi lokasi perusahaan, atau informasi lokasi acara yang berkaitan dengan tema website Anda. <\/p>\n\n\n\n<p>Ada beberapa penyedia map yang dapat Anda gunakan sebagai widget pada Laravel, sebut saja seperti Google Maps dan OpenStreetMap. Integrasi Google maps ke laravel membutuhkan akses API, sedangkan OpenStreetMap lebih banyak digunakan oleh para developer karena tersedianya fitur untuk menyesuaikan koordinat lokasi agar lebih akurat.<\/p>\n\n\n\n<p>Pada panduan kali ini, Rumahweb akan memberikan panduan cara membuat map di laravel menggunakan OpenStreetMap. Namun sebelumnya, kami akan menjelaskan terlebih dahulu tentang apa itu OpenStreetMap untuk memudahkan Anda dalam memahami artikel ini. Simak informasi berikut ini.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu OpenStreetMap?<\/h2>\n\n\n\n<p>OpenStreetMap adalah peta digital berbasis open source yang dapat digunakan dan diakses oleh siapa saja, termasuk untuk menciptakan alamat peta baru seperti lokasi kantor, event, bahkan bencana alam.<\/p>\n\n\n\n<p>Layanan peta digital OpenStreetMap menggunakan lisensi ODbL, yang memungkinkan penggunaan data OSM secara bebas tanpa biaya, sehingga Anda tidak perlu khawatir akan masalah hak cipta.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Membuat Map di Laravel<\/h2>\n\n\n\n<p>Membuat map di Laravel dapat dilakukan dengan berbagai cara, seperti melalui API Google Maps hingga menggunakan OpenStreetMap yang tidak membutuhkan akses API, hanya mengetahui nilai latitude\/longitude dan library Leaflet.<\/p>\n\n\n\n<p>Dalam artikel ini, kami memilih untuk menggunakan opsi OpenStreetMap karena kemudahan integrasinya. Ikuti langkah-langkah berikut.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1. Buat view Map<\/h3>\n\n\n\n<p>Bagi Anda yang sudah memiliki project laravel, silahkan tambahkan view menggunakan perintah berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:view maps<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb.png\"><img loading=\"lazy\" decoding=\"async\" width=\"790\" height=\"89\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb.png\" alt=\"Langkah 1. Buat view Map\" class=\"wp-image-45942\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb.png 790w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb-300x34.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb-768x87.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb-370x42.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb-270x30.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb-570x64.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb-740x83.png 740w\" sizes=\"auto, (max-width: 790px) 100vw, 790px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Berikut isi dari file <strong>maps.blade.php<\/strong>: <a href=\"https:\/\/blog.rumahweb.com\/code\/maps.blade.txt\" target=\"_blank\" rel=\"noopener\" title=\"\">Lihat text<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2. Buat Controller Map<\/h3>\n\n\n\n<p>Setelah membuat view map, selanjutnya Anda perlu membuat controller dengan perintah dibawah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:controller MapController<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb01.png\"><img loading=\"lazy\" decoding=\"async\" width=\"896\" height=\"91\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb01.png\" alt=\"Langkah 2. Buat Controller Map\" class=\"wp-image-45948\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb01.png 896w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb01-300x30.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb01-768x78.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb01-370x38.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb01-270x27.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb01-570x58.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb01-740x75.png 740w\" sizes=\"auto, (max-width: 896px) 100vw, 896px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Berikut isi dari file <strong>MapController.php<\/strong>: <a href=\"https:\/\/blog.rumahweb.com\/code\/MapController.txt\" target=\"_blank\" rel=\"noopener\" title=\"\">lihat text<\/a><\/p>\n\n\n\n<p>Dalam script yang kami lampirkan diatas, berikut adalah beberapa bagian yang perlu Anda perhatikan.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb04.png\"><img loading=\"lazy\" decoding=\"async\" width=\"401\" height=\"344\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb04.png\" alt=\"Dalam script yang kami lampirkan diatas, berikut adalah beberapa bagian yang perlu Anda ketahui.\" class=\"wp-image-45966\" style=\"width:364px;height:auto\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb04.png 401w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb04-300x257.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb04-370x317.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb04-270x232.png 270w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position:<\/strong> Lokasi yang memanfaatkan Latitude dan Longitude maps, dari hasil pencarian <a href=\"https:\/\/www.openstreetmap.org\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">https:\/\/www.openstreetmap.org<\/a> <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb05.png\"><img loading=\"lazy\" decoding=\"async\" width=\"752\" height=\"202\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb05.png\" alt=\"Position: Lokasi yang memanfaatkan Latitude dan Longitude maps, dari hasil pencarian\" class=\"wp-image-45970\" style=\"width:599px;height:auto\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb05.png 752w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb05-300x81.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb05-370x99.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb05-270x73.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb05-570x153.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb05-740x199.png 740w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>draggable<\/strong>: fungsi yang memungkinkan Anda drag\/drop titik lokasi dalam map. Jika hasilnya <strong>true<\/strong> maka titik lokasi dapat dipindahkan, sedangkan <strong>false<\/strong> menjadikan titik lokasi menjadi statik.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3. Menambah Route<\/h3>\n\n\n\n<p>Langkah ini merupakan bagian akhir dari cara membuat map di laravel. Langkahnya, Anda perlu menambahkan route baru yang akan diarahkan ke view map tersebut. Silahkan edit file <strong>routes\/web.php<\/strong> dan tambahkan perintah berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>use App\\Http\\Controllers\\MapController;\nRoute::get('\/map', &#091;MapController::class, 'index']);<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb02.png\"><img loading=\"lazy\" decoding=\"async\" width=\"455\" height=\"210\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb02.png\" alt=\"Langkah 3. Menambah Route\" class=\"wp-image-45954\" style=\"width:481px;height:auto\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb02.png 455w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb02-300x138.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb02-370x171.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb02-270x125.png 270w\" sizes=\"auto, (max-width: 455px) 100vw, 455px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Setelah semua langkah diatas selesai diterapkan dengan benar, Anda dapat mencoba akses halaman map dari <strong>namadomainAnda\/map<\/strong> pada browser. Jika berhasil, maka akan tampil seperti peta atau gambar seperti di bawah ini. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb06.png\"><img loading=\"lazy\" decoding=\"async\" width=\"731\" height=\"596\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb06.png\" alt=\"\" class=\"wp-image-46286\" style=\"width:554px;height:auto\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb06.png 731w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb06-300x245.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb06-370x302.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb06-270x220.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/03\/map-laravel-Rumahweb06-570x465.png 570w\" sizes=\"auto, (max-width: 731px) 100vw, 731px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Sampai tahap ini, proses membuat map atau peta di laravel telah selesai. Diharapkan dengan penambahan peta tersebut, pengunjung website Anda akan semakin mudah menemukan lokasi bisnis Anda. <\/p>\n\n\n\n<p>Demikian artikel kami tentang cara membuat map di Laravel. Bagaimana, apakah Anda tertarik untuk membuat map di laravel sekarang?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Laravel adalah framework PHP yang populer di kalangan developer karena berbagai keunggulannya. Framework Laravel menawarkan berbagai fitur yang dapat mempercepat dan mempermudah proses pengembangan web, salah satunya adalah integrasi map atau peta. Dalam artikel ini, kami akan berbagi cara membuat map di Laravel dengan OpenStreetMap. Maps pada website berfungsi sebagai informasi lokasi perusahaan, atau informasi [&hellip;]<\/p>\n","protected":false},"author":338,"featured_media":46000,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[142],"tags":[796,751,1497],"class_list":{"0":"post-45923","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tips-dan-trik","8":"tag-laravel","9":"tag-map","10":"tag-tutorial-laravel"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/45923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/338"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=45923"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/45923\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/46000"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=45923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=45923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=45923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}