Trentech.id
No Result
View All Result
Login / Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Trentech.id
No Result
View All Result

Membuat Aplikasi Petunjuk Jalan Dengan Google API

29 June 2020
in Learn
Aplikasi Penunjuk Jalan
1.4k
VIEWS
5/5 - (1 vote)
Kita mungkin pernah berfikir bagaimana caranya ya membuat aplikasi seperti ojek online dengan dengan google map api. nah kali ini saya akan coba menambah wawasan kita. sebenarnya tutorial seperti banyak , hanya saja keinginan untuk menulis saja , karena sudah lama tidak menulis blog ini. 🙂 .
pada dasarnya konsep hanya menge-cek antara long/lat satu titik dengan long/lat ke titik yang lain, ditambah lagi dengan
adanya plugin yang udah tersedia dari google akan memudahkan kita untuk membuat aplikasi seperti gojek, grab dll.
untuk hasil bisa dilihat di bawah ini, sebagai sample kita akan menunjukkan arah dari ciputat ke blok m.
<!DOCTYPE html>

<html>

<head>

<title>MENAMPILKAN PETUNJUK ARAH</title>

<meta charset="utf-8"/>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTzjb-g5lJmButPqyNn9y6Q1x8d3JPGyo"></script>

<script type="text/javascript">

function init(){

var service = new google.maps.DirectionsService;

var view = new google.maps.DirectionsRenderer;

var info_window = new google.maps.InfoWindow();

var zoom = 5;

var pos = new google.maps.LatLng(-3.050444,116.323242);

var options = {

'center': pos,

'zoom': zoom,

'mapTypeId': google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById('maps'), options);

view.setMap(map);

info_window = new google.maps.InfoWindow({

'content': 'loading...'

});

var result = function(){

lihat(service, view);

}

document.getElementById('lihat').addEventListener('click', result)

}

function lihat(service, view){

var start = document.getElementById('start').value;

var end = document.getElementById('end').value;

var request = {

origin: start,

destination: end,

travelMode: google.maps.TravelMode.DRIVING

};

service.route(request, function(response, status){

if(status == google.maps.DirectionsStatus.OK){

view.setDirections(response);

}else{

window.alert('Directions request failed due to ' + status);

}

});

}

google.maps.event.addDomListener(window, 'load', init);

</script>

</head>

<body>

<input type="text" id="start" size="50" placeholder="Lokasi sekarang">

<input type="text" id="end" size="50" placeholder="Tujuan">

<button id="lihat">lihat</button>

<br><br>

<div id="maps" style="width: 800px; height: 400px;"></div>

</body>

</html>


 

Tags: apiaplikasi penunjuk jalanGmapHtmljavascript
Previous Post

[Webinar] Teknologi Blockchain untuk Fintech di Era New Normal

Next Post

Panduan Cara Membagi Saham Untuk Bisnis Startup

Rifqi Muhammad

Rifqi Muhammad

Related Posts

belajar javascrypt

Kamu Bisa Membuat 6 Hal Ini Dengan Javascript

30 November 2020
1.6k

Javscript semakin populer dan populer,terbukti dengan banyaknya framework dan libary yang dikembangkan seperti angular js,node js dll.Selain itu komunitas dari...

Ini Dia Referensi Belajar Framework VueJS

Ini Dia Referensi Belajar Framework VueJS

8 August 2018
1.4k

Siapa sih yang tidak mengenal Framework VueJS? Salah satu framework Javascript yang sedang populer ini karena daya tariknya yang memesona....

belajar javascrypt

Ini Dia Library JavaScript Menarik Tahun 2018

17 July 2018
1.4k

Dengan naik daun Bahasa Pemrograman JavaScript tentu para Developer akan menggali apakah yang membuat JavaScript tersebut menjadi Bahasa Pemrograman terpopuler,...

Please login to join discussion

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    925 shares
    Share 370 Tweet 231
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    329 shares
    Share 132 Tweet 82
  • Masa Depan Zoom Tercoreng PHK: Dampak dan Prospek

    108 shares
    Share 43 Tweet 27
  • Menjelajahi Kelebihan dan Keterbatasan Chatbot AI BARD

    108 shares
    Share 43 Tweet 27
  • Upgrade XAMPP? Beginilah Caranya

    231 shares
    Share 92 Tweet 58
  • Masa Depan Bitcoin Kian Terancam

    108 shares
    Share 43 Tweet 27
  • Alasan Mahasiswa IT Harus Bisa Coding

    121 shares
    Share 48 Tweet 30
  • Startup Kecerdasan Buatan (AI) Membawa Solusi Baru dalam Industri

    108 shares
    Share 43 Tweet 27
  • Sistem Baru TikTok: Solusi Terbaru untuk Kreativitas dan Keamanan Pengguna

    108 shares
    Share 43 Tweet 27
  • 6 Kebiasaan Elon Musk yang Bisa Bikin Kamu Sukses

    120 shares
    Share 48 Tweet 30

About . Contact . Partnership

Trentech.id adalah situs yang menyajikan konten tentang startup, bisnis, game, event, hingga informasi pekerjaan. Trentech berusaha memberikan konten yang berkualitas untuk para pembacanya agar dapat menjadi rujukan utama mengenai dunia teknologi pada khususnya. Tim trentech terdiri dari orang – orang yang berkompeten dibidangnya, dan akan selalu mendukung karya – karya terbaik anak bangsa dengan memberikan kesempatan seluas-luasnya untuk para startup agar dapat publish karyanya di trentech.

Trentech ID

  • About
  • Contact
  • Partnership
  • Panduan Penulis
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Login / Register

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • Login
  • Sign Up
Forgot Password?
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.