how can i use a buton in order to hide map markers

Tue Jan 13, 2015 8:14 pm

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]&#46;type; 
var icon = customIcons[mtyper] || {};   
var marker = new google&#46;maps&#46;Marker({  
     position: new google&#46;maps&#46;LatLng( coordsArray[i]&#46;latitude, coordsArray[i]&#46;longitude ),  
     title: coordsArray[i]&#46;company_name, 
    icon:icon&#46;icon ,         
     map: Appery("googlemap1")&#46;gmap  
 });  

  markersArray&#46;push(marker); 
var mtype = coordsArray[i]&#46;type; 
var company_logo = coordsArray[i]&#46;company_logo; 
var company_name = coordsArray[i]&#46;company_name;  
var Contact_Name = coordsArray[i]&#46;Contact_Name; 
var address = coordsArray[i]&#46;address;   
var country = coordsArray[i]&#46;country;      
var point = coordsArray[i]&#46;latitude + ' , ' + coordsArray[i]&#46;longitude ; 
var point_lon =  coordsArray[i]&#46;longitude ; 
var point_lat = coordsArray[i]&#46;latitude  ;  
var url = coordsArray[i]&#46;url;   
var fburl = coordsArray[i]&#46;fburl;     
var email_Owner = coordsArray[i]&#46;email_Owner;    
var email_Contact = coordsArray[i]&#46;email_Contact;    
var Phone_Mob = coordsArray[i]&#46;Phone_Mob; 
var Phone = coordsArray[i]&#46;Phone; 
var Fax = coordsArray[i]&#46;Fax; 
var Misc = coordsArray[i]&#46;Misc;   
var html_point= '<a href="https:&#47;&#47;www&#46;google&#46;com/maps/dir/' + point  + '" target=_blank>(lat,lon) </a>: ' + point  ; 
var html_point_lon= '<a href="https:&#47;&#47;www&#46;google&#46;com/maps/dir/' + point  + '" target=_blank> lon </a>: ' + point_lon  ; 
var html_point_lat= '<a href="https:&#47;&#47;www&#46;google&#46;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=" ">' 
        &#47;&#47; + html_logos 
         + '<span class="imtitle">Address </span><br>' 

          + address  + '<br>' 
         &#47;&#47;+ html_Country   
        + ' <>'  
        +'<div class="  ">' 
         + html_Phone  
         + html_Phone_Mob    
         + html_Fax 
         + html_email_Contact  

        + ' <>'  
       +'<>'  
         +'<div class="  imain"> ' 
        +'<div class="  ">' 
         &#47;&#47; + '<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&#46;maps&#46;InfoWindow( { 
    content: bubbleCont});  

 google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {  
      infowindow&#46;open(Appery("googlemap1")&#46;gmap,marker);  
 });

};

for (var i = 0, j = coordsArray.length; i < j; i++){
CreateMarker(coordsArray, i);

}