This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button
COURSE of the MONTH
9 days, 4 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
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
Active today
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 3 days ago
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
Styling your websites can become very complex.
Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses how to implement server side field validation and display customized error messages to the client.
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month9 days, 4 hours left to enroll
764 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.