JavaScript - Google Map Api Zoom / Center Around Markers ?

Hi guys. I have posted about this before on here but I'm still having a lot of issues.

MY GOAL - I have a database with a bunch of items and each has latitude, longitude and a category (all the items are within 1 city). I want to have a page that will show a google map, display a marker based on the lat/lng and the image of the marker should be customized based on the category of the row. For example, some rows have a 'food' category and some have a 'health' category - I have specific images I want displayed for each image.

I need a script that will plot a marker for each item in my db. I have never used Google maps API before and I'm thinking V3 is what I need to use.

Can someone help fill in the code below?

PHP Code:
$query=mysql_query("SELECT * FROM table");
while($row=mysql_fetch_array($query)){
 $lat=$row['lat'];
 $lng=$row['lng'];
 $category=$row['category'];
 
     //SET MARKER PICTURE TO $category
     //ADD MARKER TO MAP
} 


Can anybody help out with the code? I don't know javascript that well and I have tried about 40 different things and get nothing but a blank page!

THANK YOU SO MUCH

Firstly I know this is a PHP issue yet it is within javascript and IMO is the root cause of the problem.

I'm trying to output markers from a search query of locations from my database, onto a Google Map (api v.3) using a tut I found http://tips4php.net/2010/10/use-php-...g-data-on-map/

When adding this to my page I'm getting Undefined index:errors.

I have changed the variables in the php part of the script to suit my database yet have left everything else alone, cant figure out why I'm still getting a blank map????

Please help....

My code with errors being shown at bottom;

Code:

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript"> 
 var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
 new google.maps.Size(32, 32), new google.maps.Point(0, 0),
 new google.maps.Point(16, 32));
 var center = null;
 var map = null;
 var currentPopup;
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng, info) {
 var pt = new google.maps.LatLng(lat, lng);
 bounds.extend(pt);
 var marker = new google.maps.Marker({
 position: pt,
 icon: icon,
 map: map
 });
 var popup = new google.maps.InfoWindow({
 content: info,
 maxWidth: 300
 });
 google.maps.event.addListener(marker, "click", function() {
 if (currentPopup != null) {
 currentPopup.close();
 currentPopup = null;
 }
 popup.open(map, marker);
 currentPopup = popup;
 });
 google.maps.event.addListener(popup, "closeclick", function() {
 map.panTo(center);
 currentPopup = null;
 });
 }
 function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
 center: new google.maps.LatLng(0, 0),
 zoom: 14,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: false,
 mapTypeControlOptions: {
 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
 },
 navigationControl: true,
 navigationControlOptions: {
 style: google.maps.NavigationControlStyle.SMALL
 }
 });
 <br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.994709, ,'<b></b><br/>');
<br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.985416, ,'<b></b><br/>');
<br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.985416, ,'<b></b><br/>');
<br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(0.000000, ,'<b></b><br/>');
<br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(0.000000, ,'<b></b><br/>');
 center = bounds.getCenter();
 map.fitBounds(bounds);

 }
 </script>

I pulled this code from Google's example section to make markers on a v3 Google Maps API (I have added my own lat/long points and corresponding event listeners, of course, but this is still the spirit of the code): Code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  function initialize() {
    var map_center = new google.maps.LatLng(39.2,-84.479381);
     var store1 = new google.maps.LatLng(39.112456,-84.574779);
    var store2 = new google.maps.LatLng(39.314153,-84.261379);
    var store3 = new google.maps.LatLng(39.197099,-84.667579);
    var store4 = new google.maps.LatLng(39.16836,-84.479381); 
    var myOptions = {
      zoom: 10,
      center: map_center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     var marker1 = new google.maps.Marker({
        position: store1, 
        map: map, 
        title:"Store 1"
    });
    var marker2 = new google.maps.Marker({
        position: store2, 
        map: map, 
        title:"Store 2"
    });
    var marker3 = new google.maps.Marker({
        position: store3, 
        map: map, 
        title:"Store 3"
    });
    var marker4 = new google.maps.Marker({
        position: store4, 
        map: map, 
        title:"Store 4"
    }); 
    google.maps.event.addListener(marker1, 'click', function() {
      map.set_center(store1);
      map.set_zoom(16);
    });
    google.maps.event.addListener(marker2, 'click', function() {
      map.set_center(store2);
      map.set_zoom(16);
    });
    google.maps.event.addListener(marker3, 'click', function() {
      map.set_center(store3);
      map.set_zoom(16);
    });
    google.maps.event.addListener(marker4, 'click', function() {
      map.set_center(store4);
      map.set_zoom(16);
    });
  }
</script>

This works without fail, but when I try to use a javascript array to hold my values and loop my way through the marker creation like so: Code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  function initialize() {
    var map_center = new google.maps.LatLng(39.2,-84.479381);
    var store_locations = new Array();
    var temporary_stuff = new Array();
    store_locations[0] = "39.112456,-84.574779";
    store_locations[1] = "39.314153,-84.261379";
    store_locations[2] = "39.197099,-84.667579";
    store_locations[3] = "39.16836,-84.479381";
    var myOptions = {
      zoom: 10,
      center: map_center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     for(i=0;i<store_locations.length;i++){
        var marker_string = "position: "+new google.maps.LatLng(store_locations[i])+", map: map, title:\"Store "+(i+1)+"\";";
        temporary_stuff[i] = new google.maps.Marker(marker_string);
    } 
    var markers = new Array();
     for(i=0;i<temporary_stuff.length;i++){
        var the_marker = "position: temporary_stuff[" + i + "], map: map, title:\"Store " + (i+1) + "\";";
        markers[i]= new google.maps.Marker(the_marker);
    } 
  }
</script>

I get a blank map. Here's a link to the test file:
http://rowsdower.freehostia.com/map_test.php

It's not throwing up any errors in Firefox's developer or in IE but there it sits, a blank map.

I'm sure this isn't clean or optimized code, but it looks correct to me. I've color-coded the code above to show what "for" loops are being used to try to replace which code. Hopefully that makes this more sensible.

I haven't even tried to add the listeners yet since I can't get the markers to appear. Can anyone tell me why this isn't working or point me in a more productive direction?

Is there a better way already out there that I haven't noticed?

Hi guys, so far any values recorded in my database are shown on the map:

http://www.vfrflight.co.uk/new2/phpsqlajax_map_v3.html

Code:

<!DOCTYPE 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>PHP/MySQL & Google Maps Example</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>

  </head>

  <body onload="load()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>

</html>

However, how do i let people place markers when a button is pressed. I believe this is the code to place markers when left click occurs:

Code:

<!DOCTYPE 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>Google Maps JavaScript API v3 Example: Map Simple</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var marker;
    var infowindow;

    function initialize() {
      var latlng = new google.maps.LatLng(37.4419, -122.1419);
      var options = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), options);
      var html = "<table>" +
                 "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
                 "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
                 "<tr><td>Type:</td> <td><select id='type'>" +
                 "<option value='bar' SELECTED>bar</option>" +
                 "<option value='restaurant'>restaurant</option>" +
                 "</select> </td></tr>" +
                 "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
    infowindow = new google.maps.InfoWindow({
     content: html
    });
 
    google.maps.event.addListener(map, "click", function(event) {
        marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });
        google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
    });
    }

    function saveData() {
      var name = escape(document.getElementById("name").value);
      var address = escape(document.getElementById("address").value);
      var type = document.getElementById("type").value;
      var latlng = marker.getPosition();
 
      var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
      downloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
          infowindow.close();
          document.getElementById("message").innerHTML = "Location added.";
        }
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
    </script>
  </head>

  <body style="margin:0px; padding:0px;" onload="initialize()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div id="message"></div>
  </body>

</html>

Help would be appreicated very much! I cannot combine the codes to save my life...

I am completely new to javascript programming. We had another company (out of business now) develop a mapping system that placed many different business locations on a Google map. However, the points overlap and hide each other. I would like the user to have to single click on the map (thus zooming the map in) before they can choose a business.

Is there a simple line of code that will do this? I want to remove the need to double click to zoom and make it a single click to zoom prior to selecting a business.

If you want to see the mapping code, I can post it. I wasn't sure what to do.

This is a fairly pressing matter as the nonprofit I am helping out is seasonal and ready to start the busy season soon.

THANKS!

Hi i m using the below code to disable ctrl+ and ctrl- (zoom in/out using keyboard). The below code is working in firefox but it is not working in IE.

The return false; is not working in IE. can you please some one help in this?

$(document).ready(function()
{
var ctrlDown = false;
var ctrlKey = 17, vKey = 189, cKey = 187;

$(document).keydown(function(e)
{

if (e.keyCode == ctrlKey) ctrlDown = true;
}).keyup(function(e)
{
if (e.keyCode == ctrlKey) ctrlDown = false;
});

$(document).keydown(function(e)
{
//alert(ctrlDown);

if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey))
return false;
});
});

Please provide me do you have any other code to do this?

Thanks,
Jagadeesh.

Can anyone look at the link below, and tell me why the infoWindow displays the same xml marker node for each marker
Thanks

Lee
http://www.hotels.seotra.com/

I'm trying to show an array of markers which, when clicked, will show an infowindow and also a circle with a radius, the size of which is also part of the array.

I've got as far as showing the markers, the infoboxes and the circles, but am struggling with toggling the circles.

I haven't quite made up my mind if I want the circles to all be initially on or off, I guess that depends how many I end up with...

Here's what I have so far: -

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps API Tests</title>
<style type="text/css">
html {font-family:Tahoma,verdana,sans-serif; font-size:0.75em;}
p {font-weight:bold;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
  function initialize() {

	var myLatlng = new google.maps.LatLng(36.637484, -121.51057);
	var myOptions = {
	  zoom: 6,
	  center: myLatlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  streetViewControl: true
	}

	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	setMarkers(map, sites);
	infowindow = new google.maps.InfoWindow({
			content: "loading..."
		});

  }


	var sites = [
		['Google', 37.422117, -122.083856, 'http://www.google.com/', 402336],
		['Yahoo', 34.030194, -118.47479, 'http://www.yahoo.com/', 201168]
	];



	function setMarkers(map, markers) {

		for (var i = 0; i < markers.length; i++) {
			var sites = markers[i];
			var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
			var marker = new google.maps.Marker({
				position: siteLatLng,
				map: map,
				title: sites[0],
				html: '<p>'+sites[0]+'</p><a href="'+sites[3]+'">Web Link</a>'
			});

			var circle = new google.maps.Circle({
				map: map,
				radius: sites[4],
				fillColor: '#12a3eb',
				fillOpacity: 0.15,
				strokeColor: '#0177b3'
			});

			circle.bindTo('center', marker, 'position'); 


			google.maps.event.addListener(marker, "click", function () {
				infowindow.setContent(this.html);
				infowindow.open(map, this);
			});
		}
	}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Any help would be much appreciated!

I have a video (.wmv) that has markers in it
one can access these markers in video players like "Windows Media Player" at "view" -> "file markers"

I want to embed the video object in an HTML page and be able to let the user jump to these markers via JavaScript or such.
I managed to do this with Internet Explorer ודןמע JavaScript but I can't get any other browser to access these markers or any timeline

function for that matter.
I need to be able to do so cross browser.

any ideas?

I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this?

btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function.

The problem is I am drawing vml shapes on my webpage, at 100%
everything is fine, click events works fine, mouseover also works
fine, but when I zoom it to less than 90% or greater than 100%. Everything messess up.
Click works, but away, like if there are 2 shapes together and I click
on one, the other one will show the data. same with mouseover, I take
the mouse over the shape, but before reaching the shape, it starts
showing the effects of that mouseover.
I tried to tackle this on window resize event. But it dont work.

I wonder, If anyone has encountered this type of problem before & have
a solution.

Hello,

I have been trying to make a script that will enlarge some images while the mouse passes over them.. though the script i wrote does not work..

Can someone please tell me what is wrong with it?

What did i do wrong?

Here is the script i wrote:

Code:

<script type="text/javascript" >
        var img1 = "img1.jpg";

        function zoomin()
        {
            document.getElementById('img1').style.height = 220;
            document.getElementById('img1').style.width = 200;
        }
        function zoomout()
        {
            document.getElementById('img1').style.height = 60;
            document.getElementById('img1').style.width = 50;
        }
    </script>

<img src="img1.jpg" id="img1" alt="" width="" height="" onMouseover="zoomin();" onMouseout="zoomout();"/>

Please help..

Thank you in advance.

I think this is done by Javascript.

I have seen a website that has a great image zoom function and would like to be able to add this function to my website. I'm afraid my Javascript isn't very good.
Could anyone tell me where I can get a script to do this or how else if there is some free software that could do it?
The webpage is: http://www.next.co.uk/shopping/homew...roomdecor/17/4

On this page if you click on Zoom on the left another image comes up on the right and when you mouse over the square on the left image it zooms the right image.

All help will is much appreciated

Hello all.

This script is working fine in IE7 but FF is complaining about undeclared variables.

Can anybody assist to get this working in FF or do I need a new script?

Any and all advice is welcome.


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test ZOOM</title>

<script type="text/javascript">

//Image zoom in/out script- by javascriptkit.com
//Visit JavaScript Kit (http://www.javascriptkit.com) for script
//Credit must stay intact for use

var zoomfactor=0.05 //Enter factor (0.05=5%)

function zoomhelper(){
if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
}
}

function zoom(originalW, originalH, what, state){
if (!document.all&&!document.getElementById)
return
whatcache=eval("document.images."+what)
prefix=(state=="in")? 1 : -1
if (whatcache.style.width==""||state=="restore"){
whatcache.style.width=originalW+"px"
whatcache.style.height=originalH+"px"
if (state=="restore")
return
}
else{
zoomhelper()
}
beginzoom=setInterval("zoomhelper()",100)
}

function clearzoom(){
if (window.beginzoom)
clearInterval(beginzoom)
}

</script>
</head>

<body>
<!-- CHANGE 99 to your image width, 100 to image height, and "office_map" to your image's name-->

<a href="#" onmouseover="zoom(100,63,'office_map_6','in')" onmouseout="clearzoom()">Zoom In</a> | 

<a href="#" onmouseover="zoom(100,63,'office_map_6','restore')">Normal</a> | 

<a href="#" onmouseover="zoom(120,60,'office_map_6','out')" onmouseout="clearzoom()">Zoom Out</a>

<div style="position:relative;width:420;height:300">
	<div style="position:absolute"><img name="office_map_6" src="images/office_map_6.gif" width="100" height="63">
	</div>
</div>
</body>
</html>

low tech

I'm searching for a crossbrowser script to zoom in/out the full website content (not text only). Who can provide me a link to that kind of script?

Thanks in advance for any help. I am not very experienced at web design. I have spent a ton of time making a webpage with text in graphics (yes, I know, bad idea). The person I am making it for decided "on my bigger laptop, the text is too small. Can you fix that" So to save myself a ton of work, I'd like to set an automatic css zoom based on the browsers screen resolution.

e.g.

If 1024, then zoom: 100.
if 1440, then zoom 120.
If 1600, then zoom 150

or somethings like that. I can do some basic stuff in CSS, but seems like maybe javascript is required to pull this off. Help!

on http://d11882157.a148.awebforyou.com...14_1422_p.html

I use a javascript zoom but it disables the users from clicking on the link above the zoom

is there any solution for this?

Hi,

I recently uploaded an interactive map which, for the most part, I'm happy with. However, I would like to add a zoom in/out function to the map; for example, when the mouse is scrolled the jpg zooms out.


What exactly would be the code for that? Thanks


Map can be viewed BY CLICKING HERE.

I have the following script that I'm using to make an overlay panel. I didn't write it, but am trying to remove the "zoom out" from it. Here's an example:
http://www.intelsystech.com/ab/SampleOverlay.html
That tiny little black scribble is my text. I don't want it to zoom the div contents, but instead to simply set height and width of the div.

Or better, does anyone know a javascript for a panel attached to the left, which has a resizer to make it wider, and a collapse/expand button? That's all I was looking for.

Thanks!


Script follows:

Code:

function Position(x, y)
{
  this.X = x;
  this.Y = y;
  
  this.Add = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X += val.X;
      if(!isNaN(val.Y))
        newPos.Y += val.Y
    }
    return newPos;
  }
  
  this.Subtract = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X -= val.X;
      if(!isNaN(val.Y))
        newPos.Y -= val.Y
    }
    return newPos;
  }
  
  this.Min = function(val)
  {
    var newPos = new Position(this.X, this.Y)
    if(val == null)
      return newPos;
    
    if(!isNaN(val.X) && this.X > val.X)
      newPos.X = val.X;
    if(!isNaN(val.Y) && this.Y > val.Y)
      newPos.Y = val.Y;
    
    return newPos;  
  }
  
  this.Max = function(val)
  {
    var newPos = new Position(this.X, this.Y)
    if(val == null)
      return newPos;
    
    if(!isNaN(val.X) && this.X < val.X)
      newPos.X = val.X;
    if(!isNaN(val.Y) && this.Y < val.Y)
      newPos.Y = val.Y;
    
    return newPos;  
  }  
  
  this.Bound = function(lower, upper)
  {
    var newPos = this.Max(lower);
    return newPos.Min(upper);
  }
  
  this.Check = function()
  {
    var newPos = new Position(this.X, this.Y);
    if(isNaN(newPos.X))
      newPos.X = 0;
    if(isNaN(newPos.Y))
      newPos.Y = 0;
    return newPos;
  }
  
  this.Apply = function(element)
  {
    if(typeof(element) == "string")
      element = document.getElementById(element);
    if(element == null)
      return;
    if(!isNaN(this.X))
      element.style.left = this.X + 'px';
    if(!isNaN(this.Y))
      element.style.top = this.Y + 'px';  
  }
}

function hookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.addEventListener)
  {
    element.addEventListener(eventName, callback, false);
  }
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function unhookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
    element.removeEventListener(eventName, callback, false);
  else if(element.detachEvent)
    element.detachEvent("on" + eventName, callback);
}

function cancelEvent(e)
{
  e = e ? e : window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}

function getMousePos(eventObj)
{
  eventObj = eventObj ? eventObj : window.event;
  var pos;
  if(isNaN(eventObj.layerX))
    pos = new Position(eventObj.offsetX, eventObj.offsetY);
  else
    pos = new Position(eventObj.layerX, eventObj.layerY);
  return correctOffset(pos, pointerOffset, true);
}

function getEventTarget(e)
{
  e = e ? e : window.event;
  return e.target ? e.target : e.srcElement;
}

function absoluteCursorPostion(eventObj)
{
  eventObj = eventObj ? eventObj : window.event;
  
  if(isNaN(window.scrollX))
    return new Position(eventObj.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, 
      eventObj.clientY + document.documentElement.scrollTop + document.body.scrollTop);
  else
    return new Position(eventObj.clientX + window.scrollX, eventObj.clientY + window.scrollY);
}

function dragObject(element, attachElement, lowerBound, upperBound, startCallback, moveCallback, endCallback, attachLater)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
      return;

  var cursorStartPos = null;
  var elementStartPos = null;
  var dragging = false;
  var listening = false;
  var disposed = false;

  function dragStart(eventObj)
  {
    if(dragging || !listening || disposed) return;
    dragging = true;

    if(startCallback != null)
      startCallback(eventObj, element);

    cursorStartPos = absoluteCursorPostion(eventObj);

    elementStartPos = new Position(parseInt(element.style.left), parseInt(element.style.top));

    elementStartPos = elementStartPos.Check();

    hookEvent(document, "mousemove", dragGo);
    hookEvent(document, "mouseup", dragStopHook);

    return cancelEvent(eventObj);
  }

  function dragGo(eventObj)
  {
    if(!dragging || disposed) return;

    var newPos = absoluteCursorPostion(eventObj);
    newPos = newPos.Add(elementStartPos).Subtract(cursorStartPos);
    newPos = newPos.Bound(lowerBound, upperBound)
    newPos.Apply(element);
    if(moveCallback != null)
      moveCallback(newPos, element);

    return cancelEvent(eventObj);
  }

  function dragStopHook(eventObj)
  {
    dragStop();
    return cancelEvent(eventObj);
  }

  function dragStop()
  {
    if(!dragging || disposed) return;
    unhookEvent(document, "mousemove", dragGo);
    unhookEvent(document, "mouseup", dragStopHook);
    cursorStartPos = null;
    elementStartPos = null;
    if(endCallback != null)
      endCallback(element);
    dragging = false;
  }

  this.Dispose = function()
  {
    if(disposed) return;
    this.StopListening(true);
    element = null;
    attachElement = null
    lowerBound = null;
    upperBound = null;
    startCallback = null;
    moveCallback = null
    endCallback = null;
    disposed = true;
  }
  
  this.GetLowerBound = function()
  { return lowerBound; }
  
  this.GetUpperBound = function()
  { return upperBound; }

  this.StartListening = function()
  {
    if(listening || disposed) return;
    listening = true;
    hookEvent(attachElement, "mousedown", dragStart);
  }

  this.StopListening = function(stopCurrentDragging)
  {
    if(!listening || disposed) return;
    unhookEvent(attachElement, "mousedown", dragStart);
    listening = false;

    if(stopCurrentDragging && dragging)
      dragStop();
  }

  this.IsDragging = function(){ return dragging; }
  this.IsListening = function() { return listening; }
  this.IsDisposed = function() { return disposed; }

  if(typeof(attachElement) == "string")
    attachElement = document.getElementById(attachElement);
  if(attachElement == null)
    attachElement = element;

  if(!attachLater)
    this.StartListening();
}

function ResizeableContainer(contentID, parent)
{
  var MINSIZE = 38;
  var EDGE_THICKNESS = 7;
  var EDGEDIFFSIZE = 2*EDGE_THICKNESS + 3;
  var EDGEDIFFPOS = EDGE_THICKNESS + 1;
  var TEXTDIFF = EDGE_THICKNESS + 2;
  
  var _width = 38;
  var _height = 38;
  
  var _maxWidth = 900;
  var _maxHeight = 600;
  
  var _minWidth = MINSIZE;
  var _minHeight = MINSIZE;

  var _container = document.createElement('DIV');
  _container.className = 'reContainer';
  
  var _content = document.getElementById(contentID);
  _content.ResizeableContainer = this;
  _content.className = 'reContent';
  
  var _rightEdge = document.createElement('DIV');
  _rightEdge.className = 'reRightEdge';
  
  var _bottomEdge = document.createElement('DIV');
  _bottomEdge.className = 'reBottomEdge';
 
  var _cornerHandle = document.createElement('DIV');
  _cornerHandle.className = 'reCorner';
  
  var _leftCornerHandle = document.createElement('DIV');
  _leftCornerHandle.className = 'reLeftCorner';
  
  var _topCornerHandle = document.createElement('DIV');
  _topCornerHandle.className = 'reTopCorner';
  
  var _rightHandle = document.createElement('DIV');
  _rightHandle.className = 'reRightHandle';

  var _bottomHandle = document.createElement('DIV');
  _bottomHandle.className = 'reBottomHandle';
  
  var _topRightImageHandle = document.createElement('DIV');
  _topRightImageHandle.className = 'reTopRightImage';
  
  var _bottomLeftImageHandle = document.createElement('DIV');
  _bottomLeftImageHandle.className = 'reBottomLeftImage';
  
  var _leftEdge = document.createElement('DIV');
  _leftEdge.className = 'reLeftEdge';
  
  var _topEdge = document.createElement('DIV');
  _topEdge.className = 'reTopEdge';
  
  _cornerHandle.appendChild(_leftCornerHandle);
  _cornerHandle.appendChild(_topCornerHandle);
  
  _rightEdge.appendChild(_topRightImageHandle);
  _rightEdge.appendChild(_rightHandle);
  
  _bottomEdge.appendChild(_bottomHandle);
  _bottomEdge.appendChild(_bottomLeftImageHandle);

  _container.appendChild(_topEdge);
  _container.appendChild(_leftEdge);    
  _container.appendChild(_rightEdge);
  _container.appendChild(_bottomEdge);
  _container.appendChild(_cornerHandle);
  _container.appendChild(_content);
    
  var _rightHandleDrag = new dragObject(_rightEdge, null, new Position(0, 3), new Position(0, 3), moveStart, rightHandleMove, moveEnd, true);
  var _bottomHandleDrag = new dragObject(_bottomEdge, null, new Position(3, 0), new Position(3, 0), moveStart, bottomHandleMove, moveEnd, true);
  var _cornerHandleDrag = new dragObject(_cornerHandle, null, new Position(0, 0), new Position(0, 0), moveStart, cornerHandleMove, moveEnd, true);
  
  UpdateBounds();
  UpdatePositions();
  AddToDocument();
  
  function moveStart(eventObj, element)
  {
    if(element == _cornerHandle)
      document.body.style.cursor = 'se-resize';
    else if(element == _bottomEdge)
      document.body.style.cursor = 's-resize';
    else if(element == _rightEdge)
      document.body.style.cursor = 'e-resize';
  }
  
  function moveEnd(element)
  {
    UpdatePositions();
    document.body.style.cursor = 'auto'; 
  }

  function rightHandleMove(newPos, element)
  {   
    _width = newPos.X + EDGE_THICKNESS;
    UpdatePositions();
  }
  
  function bottomHandleMove(newPos, element)
  {
    _height = newPos.Y + EDGE_THICKNESS;
    UpdatePositions();
  }

  function cornerHandleMove(newPos, element)
  {
    _width = newPos.X + EDGE_THICKNESS;
    _height = newPos.Y + EDGE_THICKNESS;
    UpdatePositions();
  }

  function UpdateBounds()
  {
    _rightHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS;
    _rightHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS;
    _bottomHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS;
    _bottomHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS;
    _cornerHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS;
    _cornerHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS;
    _cornerHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS;
    _cornerHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS;
  }
  
  function UpdatePositions()
  {
    if(_width < _minWidth)
      _width = _minWidth;
    if(_width > _maxWidth)
      _width = _maxWidth;
    
    if(_height < _minHeight)
      _height = _minHeight;
    if(_height > _maxHeight)
      _height = _maxHeight;
    
    _container.style.width = _width + 'px';  
    _container.style.height = _height + 'px';
    
    _content.style.width = (_width - TEXTDIFF) + 'px';
    _content.style.height = (_height - TEXTDIFF) + 'px';
    _rightEdge.style.left = (_width - EDGEDIFFPOS) + 'px';
    _rightEdge.style.height = (_height - EDGEDIFFSIZE) + 'px';
    _bottomEdge.style.top = (_height - EDGEDIFFPOS) + 'px';
    _bottomEdge.style.width = (_width - EDGEDIFFSIZE) + 'px';
    _cornerHandle.style.left = _rightEdge.style.left;
    _cornerHandle.style.top = _bottomEdge.style.top;
    _topEdge.style.width = (_width - EDGE_THICKNESS) + 'px';
    _leftEdge.style.height = (_height - EDGE_THICKNESS) + 'px';
    
    
    _rightHandle.style.top = ((_height - MINSIZE) / 2) + 'px';
    _bottomHandle.style.left = ((_width - MINSIZE) / 2) + 'px';
  }
  
  function Listen(yes)
  {
    if(yes)
    {
      _rightHandleDrag.StartListening();
      _bottomHandleDrag.StartListening();
      _cornerHandleDrag.StartListening();
    }
    else
    {
      _rightHandleDrag.StopListening();
      _bottomHandleDrag.StopListening();
      _cornerHandleDrag.StopListening();
    }
  }
  
  function AddToDocument()
  {
    if(typeof(parent) == "string")
      parent = document.getElementById(parent);
    
    if(parent == null || parent.appendChild == null)
    {
      var id = "sotc_re_" + new Date().getTime() + Math.round(Math.random()*2147483647);
      while(document.getElementById(id) != null)
        id += Math.round(Math.random()*2147483647);
        
      document.write('<span id="'+ id + '"></span>');
      element = document.getElementById(id);
      element.parentNode.replaceChild(_container, element);
    }
    else
    {
      parent.appendChild(_container);
    }
    
    Listen(true); 
  }
  
  this.StartListening = function()
  { Listen(true); }
  
  this.StopListening = function()
  { Listen(false); }
  
  this.GetContainer = function()
  { return _container; }
  
  this.GetContentElement = function()
  { return _content; }
  
  this.GetMinWidth = function()
  { return _minWidth; }
  
  this.GetMaxWidth = function()
  { return _maxWidth; }
  
  this.GetCurrentWidth = function()
  { return _width; }
  
  this.GetMinHeight = function()
  { return _minHeight; }
  
  this.GetMaxHeight = function()
  { return _maxHeight; }
  
  this.GetCurrentHeight = function()
  { return _height; }
  
  this.SetMinWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _minWidth = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetMaxWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _maxWidth = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetCurrentWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value))
      value = 0;
    
    _width = value;
    
    UpdatePositions();
  }
  
  this.SetMinHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _minHeight = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetMaxHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _maxHeight = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetCurrentHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value))
      value = 0;
    
    _height = value;
    
    UpdatePositions();
  }
}