googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
109 lines (100 loc) • 5.04 kB
HTML
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Opacity</title>
<script type="text/javascript">
//copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
function getURLParam(name) {
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
return (results === null ? "" : decodeURIComponent(results[1]));
}
var gmaps_v = getURLParam('v');
if (gmaps_v) gmaps_v = '&v='+gmaps_v;
var script = '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
document.write(script);
</script>
<script type="text/javascript" src="../src/arcgislink.js">
</script>
<script type="text/javascript" src='http://google-maps-utility-library-v3.googlecode.com/svn/tags/extdraggableobject/1.0/src/ExtDraggableObject.js'>
</script>
<style>
.btn {
border-style: outset;
background-color: white;
width: 20px;
font-weight: bold;
text-align: center;
}
</style>
<script type="text/javascript">
function showOp(op){
document.getElementById('opv').innerHTML = parseInt(op * 100);
}
function init() {
var myOptions = {
zoom: 17,
center: new google.maps.LatLng(45.5, -122.7),
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: true //my favorite feature in V3!
}
var opacity = 0.5;
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var url = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer';
var agsType = new gmaps.ags.MapType(url, {
name: 'ArcGIS',
opacity: opacity
});
map.overlayMapTypes.insertAt(0, agsType);
var bar = document.getElementById("op");
var container = document.getElementById("opSlider");
var range = (parseInt(container.style.width)-parseInt(bar.style.width));
map.controls[google.maps.ControlPosition.TOP].push(document.getElementById('opContainer'));
var opSlider = new ExtDraggableObject(bar, {
restrictY:true,
container:container});
opSlider.setValueX(range * opacity);
showOp(opacity);
google.maps.event.addListener(opSlider, 'drag', function(evt){
var op = opSlider.left()/range;
agsType.setOpacity(op);
showOp(op);
});
google.maps.event.addDomListener(document.getElementById('less'), 'click', function(){
var op = Math.max(agsType.getOpacity()-0.1, 0);
agsType.setOpacity(op);
opSlider.setValueX(range * op);
showOp(op);
agsType.hide();
});
google.maps.event.addDomListener(document.getElementById('more'), 'click', function(){
var op = Math.min(agsType.getOpacity()+0.1, 1);
agsType.setOpacity(op);
opSlider.setValueX(range * op);
showOp(op);
agsType.show();
});
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="init()">
<div id="map_canvas" style="width:100%; height:100%">
</div>
<div id="opContainer" style="position:absolute; margin-top:30px; margin-left:-200px">
<div id="less" title="Less" style="padding:0px; margin:0px;position:absolute;top:0px;left:0px;width:20px;height:20px;background-color: white;cursor:pointer;text-align:center;">
-
</div>
<div id="opSlider" style="padding: 0px; margin:0px;position:absolute;top:0px;left:22px;overflow:hidden;background-color:yellow;width:160px;height:20px;color:#AAAAAA;font-size:0.9em">
Drag to Change (<span id='opv'></span>)%
<div id="op" title="Drag me!" style="padding: 0px; margin:0px;position:absolute;top:0px;left:0px;overflow:hidden;background-color:red;width:12px;height:20px;cursor:pointer;">
</div>
</div>
<div id="more" title="More" style="padding: 0px; margin:0px;position:absolute;top:0px;left:184px;overflow:hidden;background-color:white;width:20px;height:20px;cursor:pointer;text-align:center;">
+
</div>
</div>
</body>
</html>