Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.
Solved
Toggle effect on a button
Posted on 2011-09-08
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
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>')
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
2
4 Comments
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
http://www.soundsairpark.com/sandpit/mapTest-toggle.html
Active today
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&v=2&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>
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX.
The logical flow for the problem should be:
Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses
Course of the Month8 days, 18 hours left to enroll
604 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.