Sebelumnya saya sudah jelaskan tentang cara membuat polyline pada google map. Sekarang saya akan jelaskan tentang cara menambah description pada polyline google map. Hal ini berguna untuk menampilkan kotak informasi pada garis yang sidah dibuat pada saat garis tersebut diklik oleh pengunjung.
Kode yang kita butuhkan untuk membuat description polyline atau garis adalah:
var jlnstr = '<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 '+ '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 jlnwin = new google.maps.InfoWindow({ content: jlnstr, maxWidth: 400 }); var jlntengah = new google.maps.LatLng(-2.124938, 101.434392);
Sehingga secara keseluruhan kode program kita menjadi:
<!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); }); //POLYLINE 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 }); //DESCRIPTION POLYLINE var jlnstr = '<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 '+ '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 jlnwin = new google.maps.InfoWindow({ content: jlnstr, maxWidth: 400 }); var jlntengah = new google.maps.LatLng(-2.124938, 101.434392); //END DESCRIPTION bentukjalan.setMap(map); jlnwin.setPosition(jlntengah); google.maps.event.addListener(bentukjalan, 'click', function() {jlnwin.open(map); }); //END POLYLINE } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
(Visited 1,463 times, 1 visits today)