Postingan lainnya
kok tidak tampil marker yang kedua waktu di klik..
script index.php
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?key= masukan key api google "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <link rel="stylesheet" href="style.css"/>
<script src="assets/javascripts/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="map" class= "mapping" style="width:1366px;height:768px;"></div>
</body>
<?php
include('tampil_kordinat_onclick.php');
?>
<script>
var locationssubjek=<?php echo json_encode($c)?>;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-1.875,105.674),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locationssubjek.length; i++) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(locationssubjek[i][1],locationssubjek[i][2]),
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var latnew = locationssubjek[i][1];
$.ajax({
method:"POST",
url : 'tampil_kordinat_show.php',
data : {lat: latnew},
success : function (response){
alert(response);
}
});
{
infowindow.setContent('<div class="box">'+'<div class="box-header">'+'</div>'+'<div class="box-body no-padding">'+'<table class="table table-condensed">'+'<th style="width: 10px">'+1.+'</th>'+'<th>NAMA</th>'+'<th>'+locationssubjek[i][0]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+2.+'</th>'+'<th>ALAMAT WAJIB PAJAK</th>'+'<th>'+locationssubjek[i][3]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+3.+'</th>'+'<th>KORDINAT</th>'+'<th>'+locationssubjek[i][1]+','+locationssubjek[i][2]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+4.+'</th>'+'<th>LETAK OBJEK</th>'+'<th>'+'<button id="drop" onclick="drop()">TAMPILKAN KORDINAT OBJEK</button>'+'</tr>'+'</tbody>'+'</table>'+'</div>'+'</div>');
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
}
}
} )(marker, i) );
}
function drop(){
var marker1, n;
for (n = 0; n < locationsobjek.length; n++) {
marker1 = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(locationsobjek[n][1],locationsobjek[n][2]),
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map
});
}(marker1, n)
}
</script>
</html>
query oracle tampilan kordinat show.php
<?php
include('buku.php');
?>
<?php
$a=array();
$i=0;
$LAT_SUBJEK = ($_POST['lat']);
$query_SUBJEK = "SELECT
PBB.DAT_OBJEK_PAJAK .KD_PROPINSI || '.' || PBB.DAT_OBJEK_PAJAK .KD_DATI2 || '.' || PBB.DAT_OBJEK_PAJAK .KD_KECAMATAN || '.' || PBB.DAT_OBJEK_PAJAK .KD_KELURAHAN || '.' || PBB.DAT_OBJEK_PAJAK .KD_BLOK || '-' || PBB.DAT_OBJEK_PAJAK .NO_URUT || '.' || PBB.DAT_OBJEK_PAJAK .KD_JNS_OP AS NOP,
DAT_OBJEK_PAJAK .JALAN_OP || ' BLOK ' || DAT_OBJEK_PAJAK .BLOK_KAV_NO_OP || ' RW ' || DAT_OBJEK_PAJAK .RW_OP || ' RT ' || DAT_OBJEK_PAJAK .RT_OP AS ALAMAT_OBJEK_PAJAK,
PBB.DAT_SUBJEK_PAJAK.JALAN_WP || ' BLOK ' || PBB.DAT_SUBJEK_PAJAK.BLOK_KAV_NO_WP || ' RW ' || PBB.DAT_SUBJEK_PAJAK.RW_WP || ' RT ' || PBB.DAT_SUBJEK_PAJAK.RT_WP || ' KEL ' || PBB.DAT_SUBJEK_PAJAK.KELURAHAN_WP || ' KOTA ' || PBB.DAT_SUBJEK_PAJAK.KOTA_WP || ' KODE POS : ' || PBB.DAT_SUBJEK_PAJAK.KD_POS_WP || ' TELP. ' || PBB.DAT_SUBJEK_PAJAK.TELP_WP AS ALAMAT_WP,
PBB.DAT_SUBJEK_PAJAK.KELURAHAN_WP AS KELURAHAN,
PBB.DAT_SUBJEK_PAJAK.NM_WP AS NAMA,
PBB.DAT_OBJEK_PAJAK.TOTAL_LUAS_BUMI,
PBB.DAT_OBJEK_PAJAK.TOTAL_LUAS_BNG,
PBB.KORDINAT_OBJEK.LAT_OBJEK,
PBB.KORDINAT_OBJEK.LNG_OBJEK,
PBB.KORDINAT_SUBJEK.LAT_SUBJEK,
PBB.KORDINAT_SUBJEK.LNG_SUBJEK
FROM
PBB.DAT_SUBJEK_PAJAK
INNER JOIN PBB.DAT_OBJEK_PAJAK ON PBB.DAT_OBJEK_PAJAK.SUBJEK_PAJAK_ID = PBB.DAT_SUBJEK_PAJAK.SUBJEK_PAJAK_ID
INNER JOIN PBB.KORDINAT_OBJEK ON PBB.KORDINAT_OBJEK.KD_PROPINSI = PBB.DAT_OBJEK_PAJAK.KD_PROPINSI AND PBB.KORDINAT_OBJEK.KD_DATI2 = PBB.DAT_OBJEK_PAJAK.KD_DATI2 AND PBB.KORDINAT_OBJEK.KD_KECAMATAN = PBB.DAT_OBJEK_PAJAK.KD_KECAMATAN AND PBB.KORDINAT_OBJEK.KD_KELURAHAN = PBB.DAT_OBJEK_PAJAK.KD_KELURAHAN AND PBB.KORDINAT_OBJEK.KD_BLOK = PBB.DAT_OBJEK_PAJAK.KD_BLOK AND PBB.KORDINAT_OBJEK.NO_URUT = PBB.DAT_OBJEK_PAJAK.NO_URUT AND PBB.KORDINAT_OBJEK.KD_JNS_OP = PBB.DAT_OBJEK_PAJAK.KD_JNS_OP
INNER JOIN PBB.KORDINAT_SUBJEK ON PBB.KORDINAT_SUBJEK.SUBJEK_PAJAK_ID = PBB.DAT_SUBJEK_PAJAK.SUBJEK_PAJAK_ID
WHERE
PBB.KORDINAT_SUBJEK.LAT_SUBJEK = TRUNC('$LAT_SUBJEK','9.99999999999')
ORDER BY
PBB.DAT_SUBJEK_PAJAK.SUBJEK_PAJAK_ID ASC";
$stmt= oci_parse($link, $query_SUBJEK) or die("Query gagal.....?" );
oci_execute($stmt);
?>
<?php
while ($row = oci_fetch_array($stmt)) {
$d=array();
$d[] = $row['NAMA'];
$d[] = $row['LAT_SUBJEK'];
$d[] = $row['LNG_SUBJEK'];
$d[] = $row['LAT_OBJEK'];
$d[] = $row['LNG_OBJEK'];
$d[] = $row['ALAMAT_WP'];
$d[] = $row['KELURAHAN'];
$d[] = $row['NOP'];
$d[] = $row['ALAMAT_OBJEK_PAJAK'];
$d[] = $row['TOTAL_LUAS_BUMI'];
$d[] = $row['TOTAL_LUAS_BNG'];
$a[$i]=$d;
$i++;
}
echo json_encode($a);
oci_close($link);
?>
ini query tampilan_onclick.php
<?php
include('buku.php');
?>
<?php
$c=array();
$n=0;
$query_SUBJEK = "SELECT
PBB.DAT_SUBJEK_PAJAK.NM_WP AS NAMA,
PBB.DAT_SUBJEK_PAJAK.JALAN_WP || ' BLOK ' || PBB.DAT_SUBJEK_PAJAK.BLOK_KAV_NO_WP || ' RW ' || PBB.DAT_SUBJEK_PAJAK.RW_WP || ' RT ' || PBB.DAT_SUBJEK_PAJAK.RT_WP || ' KEL ' || PBB.DAT_SUBJEK_PAJAK.KELURAHAN_WP || ' KOTA ' || PBB.DAT_SUBJEK_PAJAK.KOTA_WP || ' KODE POS : ' || PBB.DAT_SUBJEK_PAJAK.KD_POS_WP || ' TELP. ' || PBB.DAT_SUBJEK_PAJAK.TELP_WP AS ALAMAT_WP,
PBB.KORDINAT_SUBJEK.LAT_SUBJEK AS LAT_SUBJEK,
PBB.KORDINAT_SUBJEK.LNG_SUBJEK AS LNG_SUBJEK,
PBB.DAT_SUBJEK_PAJAK.KELURAHAN_WP AS KELURAHAN
FROM
PBB.DAT_SUBJEK_PAJAK
INNER JOIN PBB.KORDINAT_SUBJEK ON PBB.KORDINAT_SUBJEK.SUBJEK_PAJAK_ID = PBB.DAT_SUBJEK_PAJAK.SUBJEK_PAJAK_ID
ORDER BY
PBB.DAT_SUBJEK_PAJAK.SUBJEK_PAJAK_ID ASC";
$stmt1= oci_parse($link, $query_SUBJEK) or die("Query gagal.....?" );
oci_execute($stmt1);
?>
<?php
while ($row1 = oci_fetch_array($stmt1)) {
$d=array();
$d[] = $row1['NAMA'];
$d[] = $row1['LAT_SUBJEK'];
$d[] = $row1['LNG_SUBJEK'];
$d[] = $row1['ALAMAT_WP'];
$d[] = $row1['KELURAHAN'];
$c[$n]=$d;
$n++;
}
?>
setelah di $_POST ke tampilan_kordinat_show.php saya melakukan filter data, hasil filter tersebut akan sya tampilkan di file index.php mohon bantuannya
6 Jawaban:
google.maps.event.addListener(marker, 'click', (function(marker, n) {
return function() {
var latnew = locationssubjek[n][1];
$.ajax({
method:"POST",
url : 'tampil_kordinat_show.php',
data : {lat: latnew},
typeData:"json",
success : function (response){
response=$.parseJSON(response);
for(i = 0; i< response.length;i++){
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(response[i][3],response[i][4]),
animation: google.maps.Animation.DROP,
title:response[i][0],
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map
});
google.maps.event.addListener(marker1, 'click', (function(marker1, i) {
return function() {
infowindow.setContent('<div class="box">'+'<div class="box-header">'+'</div>'+'<div class="box-body no-padding">'+'<table class="table table-condensed">'+'<th style="width: 10px">'+1.+'</th>'+'<th>NAMA</th>'+'<th>'+response[i][0]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+2.+'</th>'+'<th>ALAMAT WAJIB PAJAK</th>'+'<th>'+response[i][5]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+3.+'</th>'+'<th>KORDINAT</th>'+'<th>'+response[i][3]+','+response[i][4]+'</tr>'+'</tbody>'+'</table>'+'</div>'+'</div>');
infowindow.open(map, marker1);
}
} )(marker1, i));
}
}
});
{
//menampilkan informasi seluruh dan tampil combo box
infowindow.setContent('<div class="box">'+'<div class="box-header">'+'</div>'+'<div class="box-body no-padding">'+'<table class="table table-condensed">'+'<th style="width: 10px">'+1.+'</th>'+'<th>NAMA</th>'+'<th>'+locationssubjek[n][0]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+2.+'</th>'+'<th>ALAMAT WAJIB PAJAK</th>'+'<th>'+locationssubjek[n][3]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+3.+'</th>'+'<th>KORDINAT</th>'+'<th>'+locationssubjek[n][1]+','+locationssubjek[n][2]+'</tr>'+'</tbody>'+'</table>'+'</div>'+'</div>');
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
}
}
} )(marker, n) );
}
tapi syntax tersebut masih ada sedikit masalah kenapa ketika saya click marker red-dot.png yang berikutnya tidak hilang yang green-dot.png yang sebelumnya mohon informasinya kawan2 apa yang harus di perbaiki
Jawaban Terpilih
Saya ngga ngeliat di kodenya yang bertugas sebagai menghapus marker. Marker-markernya bisa dibentuk dalam array , jadi sediakan dulu arraynya.
var markers = [];
//.....bikin marker
markers.push(marker); //setiap selesai bikin dimasukkan kearray ini
//fungsi untuk menghapus semua marker
function hapusMarker(){
for(i=0; i<markers.length; i++){
markers[i].setMap(null);
}
}
//fungsi untuk menghapus salah satu marker
function hapusSatuMarker(index){
markers[index].setMap(null);
}
kalo array markernya kira kira banyak bisa disimpan pada arraynya sekalian nomor urutnya, jadi gampang diindex *makasih udah mau share jawabannya, yang lain jadi bisa belajar kalo punya masalah yang sama. Kalo ada masalah lain dibuat pertanyaan baru jangan jadi bercabang, salam!
mohon maaf saya tidak tahu harus dimana meletakkan syntak yang dikasih sama kang hilman tersebut.
var markers=[];
var locationssubjek=<?php echo json_encode($c)?>;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-1.875,105.674),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//load titik kordinat yang ada didatabase server
var infowindow = new google.maps.InfoWindow();
var marker, n;
for (n = 0; n < locationssubjek.length; n++) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(locationssubjek[n][1],locationssubjek[n][2]),
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
map: map
});
//load informasi marker yang di klick dan memanggil page lain yaitu tampil.kordinat_show.php
google.maps.event.addListener(marker, 'click', (function(marker, n) {
return function() {
var latnew = locationssubjek[n][1];
$.ajax({
method:"POST",
url : 'tampil_kordinat_show.php',
data : {lat: latnew},
typeData:"json",
success : function (response){
response=$.parseJSON(response);
hapusMarker();
for(i = 0; i< response.length;i++){
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(response[i][3],response[i][4]),
animation: google.maps.Animation.DROP,
title:response[i][0],
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map
});
markers.push(marker1);
google.maps.event.addListener(marker1, 'click', (function(marker1, i) {
return function() {
infowindow.setContent('<div class="box">'+'<div class="box-header">'+'</div>'+'<div class="box-body no-padding">'+'<table class="table table-condensed">'+'<th style="width: 10px">'+1.+'</th>'+'<th>NAMA</th>'+'<th>'+response[i][0]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+2.+'</th>'+'<th>ALAMAT WAJIB PAJAK</th>'+'<th>'+response[i][5]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+3.+'</th>'+'<th>KORDINAT</th>'+'<th>'+response[i][3]+','+response[i][4]+'</tr>'+'</tbody>'+'</table>'+'</div>'+'</div>');
infowindow.open(map, marker1);
}
} )(marker1, i));
}
}
});
{
//menampilkan informasi seluruh dan tampil combo box
infowindow.setContent('<div class="box">'+'<div class="box-header">'+'</div>'+'<div class="box-body no-padding">'+'<table class="table table-condensed">'+'<th style="width: 10px">'+1.+'</th>'+'<th>NAMA</th>'+'<th>'+locationssubjek[n][0]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+2.+'</th>'+'<th>ALAMAT WAJIB PAJAK</th>'+'<th>'+locationssubjek[n][3]+'</tr>'+'</tbody>'+'<th style="width: 10px">'+3.+'</th>'+'<th>KORDINAT</th>'+'<th>'+locationssubjek[n][1]+','+locationssubjek[n][2]+'</tr>'+'</tbody>'+'</table>'+'</div>'+'</div>');
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
}
}
} )(marker, n) );
}
function hapusMarker(){
for(i=0;i < markers.length; i++){
markers[i].setMap(null);
}
}
</script>
terima kasih kang hilman ilmunya untuk saya.......ini pekerjaan pertama saya semoga bermanfaat bagi kita semua