Membuat Polygon pada Google Map v3 dengan Window Popup Event OnClick

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

Sebenarnya kode program ini adalah tutorial dari dokumentasi resmi Google Maps v3. Tetapi karena sangat pentingnya untuk Penulis karena pekerjaan tertentu maka Penulis postingkan disini. Kode program Javascript ini menggunakan Google Map v3 untuk menampilkan Polygon dan memberi fasilitas klik dan menampilkan Window Popup jika polygon tersebut diklik.

Kode programnya di bawah ini, siap dicopy paste di halaman web. Seharusnya langsung bisa dijalankan :


<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script>

      var map;
      var infoWindow;

      function initialize2() {
        var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
        var mapOptions = {
          zoom: 5,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        var bermudaTriangle;

        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        var triangleCoords = [
            new google.maps.LatLng(25.774252, -80.190262),
            new google.maps.LatLng(18.466465, -66.118292),
            new google.maps.LatLng(32.321384, -64.75737)
        ];



        bermudaTriangle = new google.maps.Polygon({
          paths: triangleCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 3,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });

        bermudaTriangle.setMap(map);

        // Add a listener for the click event
        google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

        infowindow = new google.maps.InfoWindow();
      }

      function showArrays(event) {

        // Since this Polygon only has one path, we can call getPath()
        // to return the MVCArray of LatLngs
        var vertices = this.getPath();

        var contentString = '<b>Bermuda Triangle Polygon</b><br>';
        contentString += 'Clicked Location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() + '<br>';

        // Iterate over the vertices.
        for (var i =0; i < vertices.length; i++) {
          var xy = vertices.getAt(i);
          contentString += '<br>' + 'Coordinate: ' + i + '<br>' + xy.lat() +',' + xy.lng();
        }

        // Replace our Info Window's content and position
        infowindow.setContent(contentString);
        infowindow.setPosition(event.latLng);

        infowindow.open(map);
      }
      
      google.maps.event.addDomListener(window, 'load', initialize2);
    </script>
    <br />
<div id="map-canvas" style="height: 500px; width: 500px;">
</div>


Hasilnya :

Semoga Bermanfaat.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Membuat Polygon pada Google Map v3 dengan Window Popup Event OnClick, Diterbitkan oleh scodeaplikasi pada Kamis, 28 Maret 2013. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.