Sebelumnya kita sudah bahas tentang cara menambahkan marker pada google map. Sekarang masih menggunakan peta sebelumnya kita akan tambahkan polyline atau garis pada google map. Garis ini nantinya bisa berfungsi sebagai bentuk jalan, jalur atau pembatas. Caranya dengan membahkan kode dibawah ini
var jalan = [
new google.maps.LatLng(-2.124938, 101.434392),
new google.maps.LatLng(-2.142178, 101.440056),
new google.maps.LatLng(-2.145952, 101.441344)
];
var bentukjalan = new google.maps.Polyline({
path: jalan,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
bentukjalan.setMap(map);
Sehingga keseluruhan kode google map kita menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-2.1788761,101.4415862);
var mapOptions = {
zoom: 13,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
//marker baru
var latlng2 = new google.maps.LatLng(-2.1248409,101.4273383);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString, maxWidth: 400
});
var marker = new google.maps.Marker({
position: latlng2,
map: map,
title: 'tes'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var jalan = [
new google.maps.LatLng(-2.124938, 101.434392),
new google.maps.LatLng(-2.142178, 101.440056),
new google.maps.LatLng(-2.145952, 101.441344)
];
var bentukjalan = new google.maps.Polyline({
path: jalan,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
bentukjalan.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Hasilnya bisa anda lihat pada gambar dibawah ini:
(Visited 2,366 times, 1 visits today)
gan gimana kalau membuat polyline beda warna, misal ada 3 titik, titik 1-2 polylinenya warna Merah, dari titik 2-3 polylinenya warna hitam.