Hai gaes, tolong bantu saya. Ceritanya saya sedang mengerjakan skripsi dengan tema Sistem Informasi Geografis (SIG), saya menggunakan javascript sebagai bahasa pemrograman sisi server yang berjalan di atas layanan Google App Script. Namun seperti biasa, perjalanan saya dalam mengerjakan tugas ini tidak semulus paha black pink.
Manakala titik-titik koordinat telah diperbarui di sisi server, ternyata di sisi klien tidak ter-update sempurna secara visual, jadi masih menyisakan titik-titik lawas sebelumnya.
Nah, saya mencoba sedikit tricky untuk memperbaikinya yaitu dengan cara menghapus semua titik koordinat yang lama, lalu memasangnya dengan yang baru. Tapi gimana caranya? mohon pencerahannya terimakasih.
Sekilas adalah kode saya,
var map;
var marker;
google.maps.event.addDomListener(window, 'load', initialize);
function initialize(){
var bounds = new google.maps.LatLngBounds();
map=new google.maps.Map(document.getElementById("map-canvas"));
updateMarkers(bounds,map);
google.maps.event.addDomListener(map,'dragend',function() {
if($('#redo_search_in_map').is(":checked")){
formlat = map.getCenter().lat();
formlng = map.getCenter().lng();
var type = $("#types").val();
var keywords=new Array();
$(".Check").each(function(){
if($(this).is(":checked")){
keywords.push($(this).val());
}
});
$.ajax({
url:ajax_url+'listing/search_listings',
data:{
'formlat':formlat,
'formlng':formlng,
'type':type,
'keywords':keywords
},
type:"get",
success:function(resp)
{
$("#ajax_listing").html(resp);
deleteMarkers();
updateMarkers(bounds,map);
return false;
},
error: function()
{
alert('error');
}
});
return false;
}
})
}
function updateMarkers(bounds, map){
$records){ ?>
var lat = '';
var longi = '';
var latlng = new google.maps.LatLng(lat, longi);
marker = new google.maps.Marker({
position:new google.maps.LatLng(lat,longi),
});
marker.setMap(map);
bounds.extend(latlng);
map.fitBounds(bounds);
}
function deleteMarkers(){
marker.setMap(null);
}setMapOnAll(null);
clearMarkers();
markers = [];
Kamu bisa menggunakan salah satu dari 2 cara ini.
1. Atur nilai map ke null
var map;
var marker;
google.maps.event.addDomListener(window, 'load', initialize);
function initialize(){
var bounds = new google.maps.LatLngBounds();
map=new google.maps.Map(document.getElementById("map-canvas"));
updateMarkers(bounds,map);
google.maps.event.addDomListener(map,'dragend',function() {
if($('#redo_search_in_map').is(":checked")){
formlat = map.getCenter().lat();
formlng = map.getCenter().lng();
var type = $("#types").val();
var keywords=new Array();
$(".Check").each(function(){
if($(this).is(":checked")){
keywords.push($(this).val());
}
});
$.ajax({
url:ajax_url+'listing/search_listings',
data:{
'formlat':formlat,
'formlng':formlng,
'type':type,
'keywords':keywords
},
type:"get",
success:function(resp)
{
$("#ajax_listing").html(resp);
deleteMarkers();
updateMarkers(bounds,map);
return false;
},
error: function()
{
alert('error');
}
});
return false;
}
})
}
function updateMarkers(bounds, map){
$records){ ?>
var lat = '';
var longi = '';
var latlng = new google.maps.LatLng(lat, longi);
marker = new google.maps.Marker({
position:new google.maps.LatLng(lat,longi),
});
marker.setMap(map);
bounds.extend(latlng);
map.fitBounds(bounds);
}
function deleteMarkers(){
marker.setMap(null);
}setMapOnAll(null);
clearMarkers();
markers = [];
2. Bersihkan marker
var map;
var marker;
google.maps.event.addDomListener(window, 'load', initialize);
function initialize(){
var bounds = new google.maps.LatLngBounds();
map=new google.maps.Map(document.getElementById("map-canvas"));
updateMarkers(bounds,map);
google.maps.event.addDomListener(map,'dragend',function() {
if($('#redo_search_in_map').is(":checked")){
formlat = map.getCenter().lat();
formlng = map.getCenter().lng();
var type = $("#types").val();
var keywords=new Array();
$(".Check").each(function(){
if($(this).is(":checked")){
keywords.push($(this).val());
}
});
$.ajax({
url:ajax_url+'listing/search_listings',
data:{
'formlat':formlat,
'formlng':formlng,
'type':type,
'keywords':keywords
},
type:"get",
success:function(resp)
{
$("#ajax_listing").html(resp);
deleteMarkers();
updateMarkers(bounds,map);
return false;
},
error: function()
{
alert('error');
}
});
return false;
}
})
}
function updateMarkers(bounds, map){
$records){ ?>
var lat = '';
var longi = '';
var latlng = new google.maps.LatLng(lat, longi);
marker = new google.maps.Marker({
position:new google.maps.LatLng(lat,longi),
});
marker.setMap(map);
bounds.extend(latlng);
map.fitBounds(bounds);
}
function deleteMarkers(){
marker.setMap(null);
}setMapOnAll(null);
clearMarkers();
markers = [];
Dokumentasi selengkapnya dapat kamu baca di SINI.
