Solved

Toggle effect on a button

Posted on 2011-09-08
4
303 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:Neil_Bradley
  • 2
4 Comments
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 36506875
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
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36506972
which button?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 36506982
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

0
 
LVL 5

Author Closing Comment

by:Neil_Bradley
ID: 36507048
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
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question