Toggle effect on a button

I have just added a "zoom in" button into an info window within a Google Map (you can see it working here http://www.soundsairpark.com/sandpit/mapTest2.html).
What I would like to do is have the button change so that after it has been clicked and "zoomed in" the button value will change to "zoom out" and the onclick event will set the zoom level back to its default 8.
Cheers,
N

// code shows my info window and the zoom button
var marker = createMarker(point,'<div style="width:240px; font-family:Arial; font-size:14px"> <input type="button" id="zoom" value="Zoom" onclick="map.setZoom(15)"/><\/div>')

Open in new window

Check this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API Example: Ground Overlays</title> 
<script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAI8kIB4hk8gD-5yrnCohd5RSkwzceBTFrUE_2xjvYDKmGarCKKBSCCpAUeziDLbQ5V2Ky46IDwydShg" type="text/javascript"></script> 
</head> 
<body onunload="GUnload()"> 
<div id="map" style="width: 800px; height: 600px"></div> 
<script type="text/javascript"> 
//<![CDATA[
	if (GBrowserIsCompatible()) { 
	
		function createMarker(point,html) {
			var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
				//marker.openInfoWindowHtml(html); // NOT SURE YOU STILL WANT THIS ELSE UNCOMMENT
				map.setCenter(marker.getLatLng());
				if( map.getZoom() != 8 ) {
					map.setZoom(8);
				}
				else {
					map.setZoom(15);
				}
			});
			return marker;
		}
		
		// Display the map, with some controls and set the initial location 
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(-41.34204, 173.957801),8); 
		map.setMapType(G_HYBRID_MAP);
		
		// Set up marker with info windows
		var point = new GLatLng(-41.34204, 173.957801);
		var marker = createMarker(point,'<div style="width:240px; font-family:Arial; font-size:14px"><img src="http://www.soundsairpark.com/sandpit/images/structure/logo-icon.png" width="66" height="48"  style="float:left; margin-right:10px">Marlborough Sounds <br>Air Park<br>SH1, Picton. NZ<br><\/div>');
		map.addOverlay(marker);

		// ground overlay
		var boundaries = new GLatLngBounds(new GLatLng(-41.34630,173.95099), new GLatLng(-41.33990,173.9610));
		var oldmap = new GGroundOverlay("http://www.soundsairpark.com/images/map-overlay.png", boundaries);
		map.setUIToDefault();
		map.addOverlay(oldmap);
	
	}
//]]>
</script> 
</body>
</html>

Open in new window

LVL 83

leakim971Connect With a Mentor PluritechnicianCommented: 2011-09-08

LVL 5

Neil_BradleyWeb UX/UI DeveloperAuthor Commented: 2011-09-08

have figured out how to update the button value but not toggle between zooming in and out
http://www.soundsairpark.com/sandpit/mapTest-toggle.html

LVL 40

Gurvinder Pal SinghCommented: 2011-09-08

which button?

That is brilliant. I have adapted your script so that the the 'zoom in' toggle effect is applied to the button within the info window.
Thanks for your help.
Cheers,
N

Toggle effect on a button

Who is Participating?

Already a member? Login.