Archive

Archive for March, 2010

Resize Control PResizeControl for Google Maps

March 20th, 2010 4 comments



This Google map control adds a dynamic resize function to Google’s map API: You can enlarge or shrink the size of your google map via the resize handle in the right lower corner of the map.

The map control PResizeControl is based on map-in-a-box from Wolfgang Pichler (which bases on Dynamically Resize Google Maps With Mouse). Compared to Wolfgang Pichler’s version it is completed as standalone Google Map control. It also embeds the resize handle image and does not need an external image file (only older IE’s below version 8 could not handle embedded data (But IMHO this is a feature – not a bug!). Further you can resize only the height or widht depending on your configuration. Minimum and maximum of height and/or width is also suppored.


<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=..."></script>
<!-- Include resize control PResizeControl -->
<script type="text/javascript" src="./presizecontrol.js"></script>
<script>
function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(52.521653, 13.41091), 14);
    // Add resize control PResizeControl with default settings.
    map.addControl(new PResizeControl());
    map.setUIToDefault();
  }
}
</script>
</head>
<body onload="initialize">
<div id="map" style="width: 450px; height: 250px;"></div>
</body>
</html>

Note: The PResizeControl is used in the open-source project phTagr – a social photo gallery for its Geo coding and map display. The javascript file ./presizecontrol.js is extracted from the source of pmap.js of the photo gallery phtagr. Updates of PResizeControl will be commited to the phtagr source.

Variables of PResizeControl

PResizeControl.mode
Resize modes. Possible values are PResizeControl.RESIZE_BOTH, PResizeControl.RESIZE_WIDTH or PResizeControl.RESIZE_HEIGHT. Default is PResizeControl.RESIZE_BOTH
PResizeControl.minWidth
Minimal width of the map. 0 disables the minimum width. Default is 150.
PResizeControl.minHeight
Minimal height of the map. 0 disables the minimum height. Default is 150.
PResizeControl.maxWidth
Maximal width of the map. 0 disables the minimum width. Default is 0 (disabled).
PResizeControl.maxHeight
Maximal height of the map. 0 disables the minimum height. Default is 0 (disabled).

More PResizeControl examples

PResizeControl: Resize Width Only


var resizeControl2 = new PResizeControl();
map2.addControl(new resizeControl2);
resizeControl2.mode = PResizeControl.RESIZE_WIDTH;

PResizeControl: Resize Height Only


var resizeControl3 = new PResizeControl();
map3.addControl(new resizeControl3);
resizeControl3.mode = PResizeControl.RESIZE_HEIGHT;

PResizeControl: Minimal Size


var resizeControl4 = new PResizeControl();
map4.addControl(resizeControl4);
resizeControl4.minWidth = 450;
resizeControl4.minHeight = 250;

PResizeControl: Maximum Size


var resizeControl5 = new PResizeControl();
map5.addControl(resizeControl5);
resizeControl5.maxWidth = 450;
resizeControl5.maxHeight = 250;
Categories: Related Links, source, tools Tags: , , ,