resize a google map by moving left edge
I want to enlarge (or shrink) a map when a user clicks a button. The map will adjust its left edge, moving it toward the left to get bigger, while leaving the right edge in the same position. This is basically what google maps itself does, when you click the widget to enlarge the map (covering the left si开发者_JAVA百科debar).
I have no problem resizing/repositioning the div containing the map, then calling google.maps.event.trigger(map, 'resize'); The only problem is that, as expected, the contents of the map move on the screen. I don't want that, I want to leave the map in the same position, just as google maps does. In other words, I want the lat-long position of the right edge to stay constant, since the right edge of the map doesn't change.
Calling map.getCenter() then map.setCenter() doesn't do what I want, of course (although its better than doing nothing). map.panBy() might work, since it takes its arguments in pixels (vs lat/long), but it will animate it and that's not what I want.
Any ideas? Do I have to do a conversion of lat/long to pixels, or is there a simpler way to do this?
The trick is not to resize a map but to place a mask on the map you created (the map is created at maximum size) and just move the mask (a div). The map always stays the same size. You might have to adjust the position of other controls on the map such as zoom etc. (which can be done using standard map apis) or simply display your controls on the right hand side.
One thing to keep in mind that that map will have a bounding box equal to the full size map so if you adding markers to the map (and you want the user to see them) you need to track the bounding box of the currently visible portion of the map (latLng to pixel conversion) - so that you can scroll the map if you add a marker to the portion covered up by the mask.
Here is an example done using jquery animation (but you can achieve it by simply turning the visibility of the sidebar off). . Another important thing to note is the CSS used for the wrapper and sidebar and the map container.... enjoy:
<!DOCTYPE html>
<html>
<head>
<title>Resize map</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var overlay;
var sidebar_expanded = true;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(document).ready( function() {
$("#hide").click( function(e) {
if (sidebar_expanded){
offset = "-=140";
text = "Show me"
} else {
offset = "+=140";
text = "Hide me"
}
$("#sidebar").animate({
left: offset,
}, 1000, function() {
// Animation complete.
//you probably want to change content of the hide me div to show me, etc)
$("#hide").text(text);
sidebar_expanded = (sidebar_expanded ) ? false : true;
});
})
})
</script>
<style>
body {
text-align: center;
}
#map_canvas {
position: absolute;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 900px;
height: 500px;
overflow: hidden;
}
#sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 500px;
background: white;
z-index: 2000000;
border: 1px solid black;
}
</style>
</head>
<body onload="initialize()">
<div id="wrapper">
<div id="sidebar">
<div id="hide" style="text-align:right;padding: 6px;">
Hide me
</div>
</div>
<div id="map_canvas" style="width:900px;height: 500px;">
</div>
</div>
</body>
</html>
I think this is what you wanted.
I used Michal example and added stuff.
map google Logo and Terms & use are always display . View remain in the last position even if the sidebar changes
http://jsfiddle.net/guy_regev/K39dE/3/
加载中,请稍侯......
精彩评论