Cara menambah description pada polyline google map (bag 5)

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&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;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)

Related Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp chat