javascript - Adding a Circle/Radius around Google Map markers -
anyone able me add circle/radius around google map markers?
function createmarker ( size, i,id,lat,lng,pin,title,counter,image,price,single_first_type,single_first_action,link,rooms,baths,cleanprice,single_first_type_name, single_first_action_name){ var mylatlng = new google.maps.latlng(lat,lng); var marker = new google.maps.marker({ position: mylatlng, map: map, icon: custompin(pin), shape: shape, title: title, zindex: counter, image: image, idul: id, price: price, category: single_first_type, action: single_first_action, link: link, infowindowindex : i, rooms: rooms, baths: baths, cleanprice: cleanprice, size: size, category_name: single_first_type_name, action_name: single_first_action_name }); gmarkers.push(marker); bounds.extend(marker.getposition()); google.maps.event.addlistener(marker, 'click', function(event) { // new_open_close_map(1); map_callback( new_open_close_map ); google.maps.event.trigger(map, 'resize'); if(this.image===''){ info_image='<img src="' + mapfunctions_vars.path + '/idxdefault.jpg" alt="image" />'; }else{ info_image=this.image; } var category = decodeuricomponent ( this.category.replace(/-/g,' ') ); var action = decodeuricomponent ( this.action.replace(/-/g,' ') ); var category_name = decodeuricomponent ( this.category_name.replace(/-/g,' ') ); var action_name = decodeuricomponent ( this.action_name.replace(/-/g,' ') ); var in_type = mapfunctions_vars.in_text; if(category==='' || action===''){ in_type=" "; } var infobaths; if(this.baths!=''){ infobaths ='<span id="infobath">'+this.baths+'</span>'; }else{ infobaths =''; } var inforooms; if(this.rooms!=''){ inforooms='<span id="inforoom">'+this.rooms+'</span>'; }else{ inforooms=''; } var infosize; if(this.size!=''){ infosize ='<span id="infosize">'+this.size; if(mapfunctions_vars.measure_sys==='ft'){ infosize = infosize+ ' ft<sup>2</sup>'; }else{ infosize = infosize+' m<sup>2</sup>'; } infosize =infosize+'</span>'; }else{ infosize=''; } var title= this.title.substr(0, 45) if(this.title.length > 45){ title=title+"..."; } infobox.setcontent('<div class="info_details"><span id="infocloser" onclick=\'javascript:infobox.close();\' ></span><a href="'+this.link+'">'+info_image+'</a><a href="'+this.link+'" id="infobox_title">'+title+'</a><div class="prop_detailsx">'+category_name+" "+in_type+" "+action_name+'</div><div class="prop_pricex">'+this.price+infosize+infobaths+inforooms+'</div></div>' ); infobox.open(map, this); map.setcenter(this.position); switch (infobox_width){ case 700: if(mapfunctions_vars.listing_map === 'top'){ map.panby(100,-150); }else{ if(mapfunctions_vars.small_slider_t==='vertical'){ map.panby(300,-300); }else{ map.panby(10,-110); } } vertical_off=0; break; case 500: map.panby(50,-120); break; case 400: map.panby(100,-220); break; case 200: map.panby(20,-170); break; } if (control_vars.show_adv_search_map_close === 'no') { $('.search_wrapper').addclass('adv1_close'); adv_search_click(); } close_adv_search(); });/////////////////////////////////// end event listener }
adding circle of fixed radius (say: 100) each 1 of markers it's matter of declaring circle once declared marker:
gmarkers.push(marker); bounds.extend(marker.getposition()); marker.circle = new google.maps.circle({ center:marker.getposition(), radius: 100, map: map }); please note i've attached circle marker instance don't need keep separate circle array handle them afterwards.
if markers togglable (you want turn them on/off after given event), bind circle's map attribute marker's map toggled.
marker.circle.bindto('map', marker); and if markers draggable , want circle follow marker around, bidn circle's center marker position
marker.circle.bindto('center', marker, 'position');
Comments
Post a Comment