googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
47 lines (44 loc) • 3.21 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" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../src/ExtDraggableObject.js"></script>
<script>
function init() {
var zoomSlider = new ExtDraggableObject(document.getElementById("zoom"), {restrictX:true, intervalY:8, toleranceX:50, toleranceY:25, container:document.getElementById("zoomSlider")});
var dragEndEvent = google.maps.event.addListener(zoomSlider, "dragend", function() {
var val = 19 - zoomSlider.valueY();
if (map.getZoom() !== val) {
map.setZoom(val);
}
});
var latlng = new google.maps.LatLng(37.313477473067, -121.880502070713);
var map = new google.maps.Map(document.getElementById("map_canvas"), {zoom:8, center:latlng, mapTypeId:google.maps.MapTypeId.ROADMAP, disableDefaultUI:true});
zoomSlider.setValueY(11);
var centerChanged = google.maps.event.addListener(map, "center_changed", function() {
mapZoom.setCenter(map.getCenter());
});
var zoomChanged = google.maps.event.addListener(map, "zoom_changed", function() {
zoomSlider.setValueY(19 - map.getZoom());
});
var zoomIn = google.maps.event.addDomListener(document.getElementById("zoomIn"), "click", function() {
map.setZoom(map.getZoom() + 1);
});
var zoomOut = google.maps.event.addDomListener(document.getElementById("zoomOut"), "click", function() {
map.setZoom(map.getZoom() - 1);
});
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="init()">
<div id="map_canvas" style="position:absolute;top:0px;left:0px;width:100%;height:100%;"></div>
<div id="zoomContainer" style="position:absolute;top:25px;left:25px">
<div id="zoomIn" style="padding: 0px; margin:0px;position:absolute;top:0px;left:0px;overflow-x:hidden;overflow-y:hidden;background-image:url(http://maps.gstatic.com/intl/en_us/mapfiles/mapcontrols3d5.png);background-repeat:no-repeat;width:24px;height:22px;cursor:pointer;background-position:-17px -65px;"> </div>
<div id="zoomSlider" style="padding: 0px; margin:0px;position:absolute;top:22px;left:0px;overflow-x:hidden;overflow-y:hidden;background-image:url(http://maps.gstatic.com/intl/en_us/mapfiles/mapcontrols3d5.png);background-repeat:no-repeat;width:24px;height:161px;cursor:pointer;background-position:-17px -87px;">
<div id="zoom" style="padding: 0px; margin:0px;position:absolute;top:0px;left:2px;overflow-x:hidden;overflow-y:hidden;background-image:url(http://maps.gstatic.com/intl/en_us/mapfiles/mapcontrols3d5.png);background-repeat:no-repeat;width:20px;height:12px;cursor:pointer;background-position:0px -384px;"> </div>
</div>
<div id="zoomOut" style="padding: 0px; margin:0px;position:absolute;top:183px;left:0px;overflow-x:hidden;overflow-y:hidden;background-image:url(http://maps.gstatic.com/intl/en_us/mapfiles/mapcontrols3d5.png);background-repeat:no-repeat;width:24px;height:22px;cursor:pointer;background-position:-17px -360px;"> </div>
</div>
</body>
</html>