Drag A Map

Ever wanted to drag your Google Map around the screen? Now you can. Go ahead, drag it...IE users will have to drag it by it's border, FireFox users can drag it from anywhere.

To do this we used the Drag and Drop DHTML script provided by Walter Zorn..

Here's the code we used for the googlemaps tag and the javascript import of the Drag and Drop utility:

<script src="wz_dragdrop.js" type="text/javascript"></script>
<googlemaps:map id="map" width="780" height="300" version="2.41" type="STREET" zoom="8">
  	<googlemaps:key domain="www.lamatek.com" key="xxxxx"/>
  	<googlemaps:imageoverlay id="image_1" url="/GoogleMaps/images/icon2.gif" opacity="0.50"
  	    x="50" y="10" link="http://www.lamatek.com/GoogleMaps/"/>
	<googlemaps:point id="point1" address="74 Connors Lane" city="Elkton" state="MD" 
	    zipcode="21921" country="US"/>
	<googlemaps:marker id="marker1" point="point1"/>
	<googlemaps:message>Please wait...</googlemaps:message> 
</googlemaps:map>
<googlemaps:scripttag id="map"/> 
<googlemaps:javascript id="map"/> 
  

Next we had to wrap our map with another <div> element. It is this element that we will drag around to actually move the map:

<div id="drag_me" style="position: relative;">
	<googlemaps:div id="map" style="border-style: solid; border-width: 1px; 
	 border-color: #000045;"/>
</div>

And last but not least, we place this bit of javascript immediately after the <googlemaps:initialize> tag:

<script type="text/javascript">
//<![CDATA[
  SET_DHTML("drag_me");
//>>]
</script>

That's all we did! Enjoy.

Return to the Examples page.