How to Add an Image Overlay With V3 Maps API

You can create a custom Google Map with an image overlay using Google Maps API Version 3. For example, you can overlay a USGS contour map over an existing Google map to generate a detailed hiking trail map for your website visitors. Use the Google Maps "OverlayView" class to add image overlays to your map.

Instructions

1. Open your HTML file and locate the section containing your Google Maps code.

2. Create a global variable called "overlay" by typing the following in your code above where you initialize your map:

   var overlay;

3. Locate your map's "initialize" function and add a variable containing the path for the overlay image file:

   var imageSource = 'graphics/map_hiking.jpg';

4. Define the overlay global variable. For example, type:

   overlay = new HikingOverlay(bounds, srcImage, map);

   The overlay variable calls a "HikingOverlay" function, which contains the parameters for the image overlay.

5. Create the function for the overlay image. In this example, the function is called "HikingOverlay":

   function HikingOverlay (bounds, srcImage, map)

6. Initialize the bounds, image source and map properties for the Hiking Overlay function.

7. Create a subclass for the HikingOverlay function. Use a subclass so you don't overwrite the attributes of the parent class. For example, type:

   HikingOverlay.sub = new google.maps.OverlayView ( );

8. Attach the overlay to the panes in the Google Maps window. You can use HTML “div” elements to precisely position the overlay or simply attach it to one pane if the overlay covers the entire map. For example, create the division and attach the map to the pane by typing :

   HikingOverlay.sub.onAdd = function ( ) {

   var division = document.createElement ('DIV');

   var img = document.create.Element ("img");
   div.appendChild (img);

   sub_div = div;

   var panes = this.getpanes ( );
   panes.overlayLayer.appendChild(div);

   }

9. Place the overlay over the map using the "draw" method. For example, type:

   HikingOverlay.sub.draw = function function() {
   var overlayProjection = this.getProjection();
   }

10. Convert the image projection from latitude and longitude coordinates to pixels for placement in the div. For example, type:

    var northWest = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthWest());

11. Specify the dimensions of the div style to fit the image. For example, type:

    var div = this.div_;
    div.style.left = northWest.x + 'px';

12. Save your file and test it. Google displays your image over your existing Google map. If the image is not positioned correctly, specify additional positioning coordinates to your code to precisely place the image.

References

• Google: Google Maps Javascript API V3 Overlays