Trentech.id
No Result
View All Result
Login / Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
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
Rifqi Muhammad

Rifqi Muhammad

Related Posts

belajar javascrypt

Kamu Bisa Membuat 6 Hal Ini Dengan Javascript

30 November 2020
1.4k

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.3k

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

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    249 shares
    Share 99 Tweet 62
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    154 shares
    Share 62 Tweet 39
  • Ternyata Beginilah Cara Kerja Powerbank

    115 shares
    Share 46 Tweet 29
  • Panduan Cara Membagi Saham Untuk Bisnis Startup

    122 shares
    Share 49 Tweet 31
  • Fitur Baru, Begini Cara Gunakan Twitter Circle yang Mirip dengan Fitur Close Friend IG

    110 shares
    Share 44 Tweet 28
  • Baru! WhatsApp Emoji Reaction Bisa Beri Emoji di Chat Pribadi & Grup

    109 shares
    Share 44 Tweet 27
  • Cara Ampuh Market Validation untuk Melakukan Validasi Ide Startup

    132 shares
    Share 53 Tweet 33
  • Qlapa Gulung Tikar

    116 shares
    Share 46 Tweet 29
  • Bagaimana Saya Menemukan Partner Saat Masih Awam di Dunia Startup

    109 shares
    Share 44 Tweet 27
  • Bukalapak Akuisisi Startup 5 Startup Lokal Senilai US$ 1 Miliar

    110 shares
    Share 44 Tweet 28

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
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.