I am a newbie in Google Maps API, I got a question about showing and
hiding a polylines. My goal is to click a checkbox, a polyline will
show up on the map. I got this part done. However, when I uncheck the
box, I want the line to disappear. I am not sure how I can do it.
After looking around, it seems like people use removeOverlay()
and .hide() function but I couldn't get it to work.
Here is how the checkbox in my code work:
side_bar_html += '<form name=testform>130 East <INPUT TYPE="checkbox"
NAME="Item1" VALUE="1" onClick="javascript:myclick()"></form>';
in the myclick(), i have this:
var polyline = new GPolyline([new GLatLng(40.110484,-88.227189),new
GLatLng(40.110418,-88.228386), new GLatLng(40.11012,-88.228865)],
"#ff0000", 5);
map.addOverlay(polyline);
> I am a newbie in Google Maps API, I got a question about showing and
> hiding a polylines. My goal is to click a checkbox, a polyline will
> show up on the map. I got this part done. However, when I uncheck the
> box, I want the line to disappear. I am not sure how I can do it.
> After looking around, it seems like people use removeOverlay()
> and .hide() function but I couldn't get it to work.
> Here is how the checkbox in my code work:
> side_bar_html += '<form name=testform>130 East <INPUT TYPE="checkbox"
> NAME="Item1" VALUE="1" onClick="javascript:myclick()"></form>';
> in the myclick(), i have this:
> var polyline = new GPolyline([new GLatLng(40.110484,-88.227189),new
> GLatLng(40.110418,-88.228386), new GLatLng(40.11012,-88.228865)],
> "#ff0000", 5);
> map.addOverlay(polyline);
> Can some one please help me?? What should I do? Thank you!!
My map works. A link to yours (that doesn't) might let me (or someone
else) make a recommendation as to why yours doesn't. That is why
the posting guidelines request a link to your map that shows the
problem.
side_bar_html += '<form name=testform>130 East <INPUT TYPE="checkbox"
NAME="Item1" VALUE="1" onClick="myclick(this.checked)"></form>';
(No need to use 'javascript:' in that onClick handler btw).
2) Create your polyline just once - it needs to be created outside of
any functions so that 'myPolyline' is a global variable and then your
myclick() function can access it:
var myPolyline = new GPolyline([new GLatLng(40.110484,-88.227189),new
GLatLng(40.110418,-88.228386), new GLatLng(40.11012,-88.228865)],
"#ff0000", 5);
3) Update your myclick() function:
function myclick(state){
if(state){
// show polyline
map.addOverlay(myPolyline);
} else {
// remove polyline
map.removeOverlay(myPolyline);
}
}
Martin.
On 6 Nov, 06:29, iwotic <aunah...@gmail.com> wrote:
> I am a newbie in Google Maps API, I got a question about showing and
> hiding a polylines. My goal is to click a checkbox, a polyline will
> show up on the map. I got this part done. However, when I uncheck the
> box, I want the line to disappear. I am not sure how I can do it.
> After looking around, it seems like people use removeOverlay()
> and .hide() function but I couldn't get it to work.
> Here is how the checkbox in my code work:
> side_bar_html += '<form name=testform>130 East <INPUT TYPE="checkbox"
> NAME="Item1" VALUE="1" onClick="javascript:myclick()"></form>';
> in the myclick(), i have this:
> var polyline = new GPolyline([new GLatLng(40.110484,-88.227189),new
> GLatLng(40.110418,-88.228386), new GLatLng(40.11012,-88.228865)],
> "#ff0000", 5);
> map.addOverlay(polyline);
Got it to work! Thank you Martin! Your suggestion works perfectly.
I think the problem with me previously was that I used local variable
instead of using a global variable.
On Nov 6, 4:25 am, Martin <warwo...@gmail.com> wrote:
> (No need to use 'javascript:' in that onClick handler btw).
> 2) Create your polyline just once - it needs to be created outside of
> any functions so that 'myPolyline' is a global variable and then your
> myclick() function can access it:
> var myPolyline = new GPolyline([new GLatLng(40.110484,-88.227189),new
> GLatLng(40.110418,-88.228386), new GLatLng(40.11012,-88.228865)],
> "#ff0000", 5);
> On 6 Nov, 06:29,iwotic<aunah...@gmail.com> wrote:
> > I am a newbie in Google Maps API, I got a question about showing and
> > hiding a polylines. My goal is to click a checkbox, a polyline will
> > show up on the map. I got this part done. However, when I uncheck the
> > box, I want the line to disappear. I am not sure how I can do it.
> > After looking around, it seems like people use removeOverlay()
> > and .hide() function but I couldn't get it to work.
> > Here is how the checkbox in my code work:
> > side_bar_html += '<form name=testform>130 East <INPUT TYPE="checkbox"
> > NAME="Item1" VALUE="1" onClick="javascript:myclick()"></form>';
> > in the myclick(), i have this:
> > var polyline = new GPolyline([new GLatLng(40.110484,-88.227189),new
> > GLatLng(40.110418,-88.228386), new GLatLng(40.11012,-88.228865)],
> > "#ff0000", 5);
> > map.addOverlay(polyline);