how can i use a buton in order to hide map markers
i use a rest invoke service comand to load lat and lon markers from the db.
code
var response = JSON.stringify(data);
localStorage.setItem("json_response", response);
var list_coordinate = localStorage.getItem('json_response');
var coordsArray = JSON.parse(list_coordinate);
var marker;
var markersArray=[];
/*var myLat = localStorage.getItem('local_geo_lat');
var myLong = localStorage.getItem('local_geo_long');
var myLatlng = new google.maps.LatLng(myLat,myLong); */
/* infobubble also look in infowindow.js
map custom icons */
var customIcons = {
farm: {
icon: 'http://www.dare2impress.net/map.organic/images/map/o_03.png'
},
restaurant: {
icon: 'http://www.dare2impress.net/map.organic/images/map/y_03.png'
},
producer: {
icon: 'http://www.dare2impress.net/map.organic/images/map/c_03.png'
},
market: {
icon: 'http://www.dare2impress.net/map.organic/images/map/g_03.png'
},
shop: {
icon: 'http://www.dare2impress.net/map.organic/images/map/b_03.png'
},
organization: {
icon: 'http://www.dare2impress.net/map.organic/images/map/w_03.png'
},
searchicon: {
icon: 'http://www.dare2impress.net/map.organic/images/map/w_s_01.png'
}
};
var mapOptions = {
//zoom: 5,
//center: myLatlng,
//mapTypeId: google.maps.MapTypeId.ROADMAP
zoom: 5,
mapTypeControl: true,
navigationControl: true,
googleBarOptions: {showOnLoad:true},
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
//mapTypeIds: [ google.maps.MapTypeId.SATELLITE,google.maps.MapTypeId.ROADMAP ]
}
};
var CreateMarker = function(coordsArray, i){
Code: Select all
var mtyper= coordsArray[i].type;
var icon = customIcons[mtyper] || {};
var marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray[i].latitude, coordsArray[i].longitude ),
title: coordsArray[i].company_name,
icon:icon.icon ,
map: Appery("googlemap1").gmap
});
markersArray.push(marker);
var mtype = coordsArray[i].type;
var company_logo = coordsArray[i].company_logo;
var company_name = coordsArray[i].company_name;
var Contact_Name = coordsArray[i].Contact_Name;
var address = coordsArray[i].address;
var country = coordsArray[i].country;
var point = coordsArray[i].latitude + ' , ' + coordsArray[i].longitude ;
var point_lon = coordsArray[i].longitude ;
var point_lat = coordsArray[i].latitude ;
var url = coordsArray[i].url;
var fburl = coordsArray[i].fburl;
var email_Owner = coordsArray[i].email_Owner;
var email_Contact = coordsArray[i].email_Contact;
var Phone_Mob = coordsArray[i].Phone_Mob;
var Phone = coordsArray[i].Phone;
var Fax = coordsArray[i].Fax;
var Misc = coordsArray[i].Misc;
var html_point= '<a href="https://www.google.com/maps/dir/' + point + '" target=_blank>(lat,lon) </a>: ' + point ;
var html_point_lon= '<a href="https://www.google.com/maps/dir/' + point + '" target=_blank> lon </a>: ' + point_lon ;
var html_point_lat= '<a href="https://www.google.com/maps/dir/' + point + '" target=_blank>lat </a>: ' + point_lat ;
var html_Phone;
var html_Phone_Mob;
var html_Fax;
var html_email_Contact;
var html_url;
var html_fburl;
if(email_Contact !=null)
{ html_email_Contact= '<b>e: </b> '+ email_Contact ;}
else{ html_email_Contact ='';}
if(url !=null)
{ html_url= ' <b>w: </b><a href="'+ url + '"target=_blank>'+ url +'</a>';}
else{ html_url ='';}
if(fburl !=null)
{ html_fburl= ' <b>f: </b><a href="'+ fburl + '"target=_blank>'+ fburl +'</a>';}
else{ html_fburl ='';}
if (Phone !=null)
{ html_Phone = ' <b>t: </b>'+ Phone +' <br>' ;}
else{ html_Phone = '';}
if(Phone_Mob !=null)
{ html_Phone_Mob= ' <b>t: </b> '+ Phone_Mob + '<br>'; }
else{ var html_Phone_Mob ='';} if(Fax !=null)
{ html_Fax= ' <b>Fax : </b> '+ Fax ; }
else{ var html_Fax ='';}
Code: Select all
var bubbleCont =
'<div class="iw">'
+ ' <div class="i-str">'
+'<div class=" ititle">'
+ company_name + ' - ' + mtype
+'<>'
+'<>'
+ ' <div class=" flush ">'
+'<div class="ilatlon "> '
+'<div class="ilat">'
+ html_point_lat
+ ' <>'
+'<div class="ilon">'
+ html_point_lon
+ ' <>'
+'<>'
+'<>'
+'<div class=" "> '
+'<div class=" "> '
+'<div class=" imain"> '
+'<div class=" ">'
// + html_logos
+ '<span class="imtitle">Address </span><br>'
+ address + '<br>'
//+ html_Country
+ ' <>'
+'<div class=" ">'
+ html_Phone
+ html_Phone_Mob
+ html_Fax
+ html_email_Contact
+ ' <>'
+'<>'
+'<div class=" imain"> '
+'<div class=" ">'
// + '<span class="imtitle">web </span><br>'
+ html_url
+ ' <>'
+'<>'
+'<div class=" imain"> '
+'<div class=" ">'
+ '<span class="imtitle">info </span><br>'
+ Misc
+ ' <>'
+'<>'
+' <>'
+' <>'
+' <div>';
var infowindow = new google.maps.InfoWindow( {
content: bubbleCont});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(Appery("googlemap1").gmap,marker);
}); };
for (var i = 0, j = coordsArray.length; i < j; i++){
CreateMarker(coordsArray, i);
}
function deleteMarkers() {
for (i = 0; i < markersArray.length; i++) {
markersArray.setMap(null);
markersArray.setVisible(false);
}
console.log('deleteMarkers has run');
//Appery("map").options.mapElement.gmap("refresh");
markersArray.length = 0;
}
function clearOverlays() {
for (var i = 0; i < coordsArray.length; i++ ) {
coordsArray.setMap(null);
}
coordsArray.length = 0;
}
//Appery("googlemap1").options.mapElement.gmap('addMarker', marker);
Appery("googlemap1").options.mapElement.gmap(mapOptions);
Appery("googlemap1").options.mapElement.gmap("refresh");
/code
i use a button to invoce service and i need another button to call delete markers function.
any ideas?