Menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3
Hai sobat programmer. Programmer GoBlog baglik lagi dengan tutorial web gis dengen google map. Sebelumnya di tutorial Dasar Pemrograman web GIS dengan Google Map API v3 Kita telah mengenal GIS dan mencoba membuat web gis sederhana untuk menampilkan titik-titik koordinat tertentu di peta google map. Nah kali ini kita akan melanjutkan web GIS kita dengan menambahkan fungsi tambahan pada web kita agar user dapat menambahkan titik tertentu di peta dengan melakukan klik kanan pada peta tersebut.
Tutorial ini merupakan tutorial lanjutan dari Dasar Pemrograman web GIS dengan Google Map API v3 bagi yang belum mebaca saya sarankan untuk membacanya terlebih dahulu sebelum mengikuti tutorial ini, namun tidak menjadi sebuah keharusan karena anda tetap bisa mengikuti tutorial ini dengan beberapa penyesuaian.
Baiklan, kita buka lagi file tutorial web gis menggunakan google map api v3 kita dari tutorial sebelumnya. Sekarang kita tambahkanbaris berikut dipaling bawah sebelum tutup tag </script>
selanjutnya kita perlu memanggil fungsi
setAction(map);
melalui fungsi initialize();
tempatkan baris code
dibawah baris setMarkers(map,sites);
berukut merupakan keseluruhan kode kita.
Baiklah, demikian tutorial kita kali ini tentang bagaimana menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3.
Jika ada yang ingin mendownload source code nya silahkan ambil disini
Dan apabila anda merasa tutorial ini bermanfaat anda bisa membantu orang lain menemukan artikel ini dengan meng-klik icon sosial media dibawah untuk membagikannya.
Tutorial ini merupakan tutorial lanjutan dari Dasar Pemrograman web GIS dengan Google Map API v3 bagi yang belum mebaca saya sarankan untuk membacanya terlebih dahulu sebelum mengikuti tutorial ini, namun tidak menjadi sebuah keharusan karena anda tetap bisa mengikuti tutorial ini dengan beberapa penyesuaian.
Baiklan, kita buka lagi file tutorial web gis menggunakan google map api v3 kita dari tutorial sebelumnya. Sekarang kita tambahkanbaris berikut dipaling bawah sebelum tutup tag </script>
1: function setAction(map){
2:
3: google.maps.event.addListener(map, "rightclick", function(event) {
4:
5: if(confirm("Tandai Titik Ini? (klik pada tanda yang muncul untuk melihat pilihan)")){
6: var lat = event.latLng.lat();
7: var lng = event.latLng.lng();
8:
9: var siteLatLng = new google.maps.LatLng(lat, lng);
10: var marker = new google.maps.Marker({
11: position: siteLatLng,
12: map: map,
13: title: "add data",
14: zIndex: 100,
15: html: "ddd"
16:
17: });
18: google.maps.event.addListener(marker, "mouseover", function () {
19:
20: infowindow.setContent(this.html);
21: infowindow.open(map, this);
22: });
23:
24: }
25:
26: });
27: }
selanjutnya kita perlu memanggil fungsi
setAction(map);
melalui fungsi initialize();
tempatkan baris code
setAction(map); dibawah baris setMarkers(map,sites);
berukut merupakan keseluruhan kode kita.
1: <html>
2: <head>
3: <title></title>
4: </head>
5: <body>
6: <div id="map_canvas" style="width:100%; height:100%;">
7:
8:
9: </div>
10: </body>
11: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
12: <script type="text/javascript">
13: var infowindow = null;
14: (function() { // fungsi untuk dijalankan ketika halaman web dubuka
15:
16:
17: initialize(); // mengeksekusi fungsi initialize()
18:
19: })();
20:
21:
22: function initialize() {
23: // Baris berikut digunakan untuk mengisi marker atau tanda titik di peta
24: var sites = [
25:
26: ['Polinela', -5.358725,105.233413 ,1, '<h4>Politeknik Negeri Lampung</h4><p>Keterangan didalam marker</p>'], // pertama merupakan judul market, kedua adalah titik koordinan latitude, ketiga longitude, dan keempat merupakan z index (titik mana yang ditampilkan lebih dulu) untuk menentukan titik mana diatas titik mana, ketiga merupakan isi keterangan marker nya.
27: ['Unila', -5.364505,105.243442 ,2, '<h4>Universitas Lampung</h4><p>Keterangan didalam marker</p>'],
28:
29: ];
30: var centerMap = new google.maps.LatLng(-5.387625, 105.249326); // mengatur pusat peta
31:
32: var myOptions = {
33: zoom: 13, // level zoom peta
34: center: centerMap, // setting pusat peta ke centerMap
35: mapTypeId: google.maps.MapTypeId.ROADMAP //menentukan tipe peta
36: }
37:
38: var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //menempatkan peta pada div dengan ID map_canvas di html
39:
40: setMarkers(map, sites); // memanggil fungsi setMarker untuk menandai titik di peta.
41: setAction(map); //tambahan dari tutorial 2 untuk memanggil fungsi setAction(map);
42: infowindow = new google.maps.InfoWindow({
43: content: "loading..."
44: });
45:
46: var bikeLayer = new google.maps.BicyclingLayer();
47: bikeLayer.setMap(map); //memnunculkan peta
48:
49: }
50:
51:
52:
53:
54:
55: function setMarkers(map, markers) {
56: //berikut merupakan perulangan untuk membaca masing masing titik yang telah kita definisikan di sites[];
57: for (var i = 0; i < markers.length; i++) {
58: var sites = markers[i];
59: var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
60: var marker = new google.maps.Marker({
61: position: siteLatLng,
62: map: map,
63: title: sites[0],
64: zIndex: sites[3],
65: html: sites[4]
66:
67: });
68:
69: var contentString = "Some content";
70: // berikut merupakan fungsi untuk mengatur agar keterangan marker muncuk ketika mouse diarahkan ke marker (mouse over)
71: google.maps.event.addListener(marker, "mouseover", function () {
72:
73: infowindow.setContent(this.html);
74: infowindow.open(map, this);
75: });
76: }
77: }
78:
79: //-----------------------------------Tambahan1 dari tutorial 2 -----------------------------------------------
80:
81: function setAction(map){
82:
83: google.maps.event.addListener(map, "rightclick", function(event) {
84:
85: if(confirm("Tandai Titik Ini? (klik pada tanda yang muncul untuk melihat pilihan)")){
86: var lat = event.latLng.lat();
87: var lng = event.latLng.lng();
88:
89: var siteLatLng = new google.maps.LatLng(lat, lng);
90: var marker = new google.maps.Marker({
91: position: siteLatLng,
92: map: map,
93: title: "add data",
94: zIndex: 100,
95: html: "ddd"
96:
97: });
98: google.maps.event.addListener(marker, "mouseover", function () {
99:
100: infowindow.setContent(this.html);
101: infowindow.open(map, this);
102: });
103:
104: }
105:
106: });
107: }
108:
109: //-----------------------------------akhir tambahan1 dari tutorial 2--------------------------------------------
110:
111:
112: </script>
113: </html>
Baiklah, demikian tutorial kita kali ini tentang bagaimana menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3.
Jika ada yang ingin mendownload source code nya silahkan ambil disini
Dan apabila anda merasa tutorial ini bermanfaat anda bisa membantu orang lain menemukan artikel ini dengan meng-klik icon sosial media dibawah untuk membagikannya.
.png)
0 komentar:
Posting Komentar