Home/ Questions/Q 6976975
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:33:58+00:00

I am trying to create an interface like the google maps. i.e. I want

  • 0

I am trying to create an interface like the google maps.
i.e. I want to show an image on screen and when I drag, I want to load a part of the image as required. My image is infinitely long horizontally, but its vertical height is a fixed 200 pixels.

The server side is ready and sends back image data as required.

My question is, how to implement the client side image dragging thing? I am trying this using GWT. I am not able to figure out how to show the image to the user and then allow him to drag it left/right. I have read this site and all google maps related questions, but still I am not able to figure out how to implement the client side part of this.

Thanks,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You do not implement the drag and zoom yourself.

    You call the Google Javascript API, or its GWT wrapped API.

    The service would serve the draggable and zoomable map to a canvas on the dom of your html page.

    You specify the coordinates and the features of the map frame. Your app would communicate with the map service to find out what the user is doing. You will not directly control what the user does on the map canvas. You have to communicate/request with/from the map service.

    http://code.google.com/p/gwt-google-apis/wiki/MapsGettingStarted.

    Or you can use the Maps/Latitude Javascript API directly and it is easy to put your own gwt wrapper around the div holding the map canvas. You would communicate with the map service through REST API passing and receiving either json or xml.

    Make sure you are not requesting for an image of a location.

    For example the following simple html (which I stole from the maps api site) presents a draggable/zoomable map. No hard work involved.

    Notice the div holding the map_canvas id? You would need to wrap that in GWT.
    This placing of canvas on div and wrapping them in gwt is standard practice even for locally generating image and charting utilities, where such utilities are written in javascript. DOM.getElementById should be your good friend. Simply clutter your gwt rootpanel stuffs around the map canvas.

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
    • 0