googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
76 lines (69 loc) • 2.49 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Drag Zoom MultiMap</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
</script>
<script type="text/javascript">
document.write('<script type="text/javascript" src="../src/keydragzoom' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
</script>
<script type="text/javascript">
var map1;
var map2;
function createMap(mapDiv) {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(35.227, -80.84),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(mapDiv), myOptions);
map.enableKeyDragZoom({
key: "shift",
boxStyle: {
border: "2px dashed black",
backgroundColor: "red",
opacity: 0.5
},
veilStyle: {
backgroundColor: "gray",
opacity: 0.2
},
visualEnabled: true
});
return map;
}
function init() {
map1 = createMap('map1');
map2 = createMap('map2');
}
</script>
<style>
#map1 {
position:absolute;
left :0px;
top: 0px;
width: 400px;
height: 500px;
border: 1px solid black
}
#map2 {
position:absolute;
left : 450px;
top: 0px;
width: 400px;
height: 500px;
border: 1px solid black
}
</style>
</head>
<body onload="init()">
<a href='?packed'>Packed</a> | <a href='?'>Unpacked</a> Version of the script.
<br />
Hold down the <span style="color: red; font-weight: bold;" >Shift</span> key while dragging a box.
<div style="position: relative;">
<div id="map1"></div>
<div id="map2"></div>
</div>
</body>
</html>