How to Create a Fixed Legend in Your Google Maps Mashup

Using Google Maps for web applications provides an interactive experience for users, especially when utilizing features like color-coded pushpins. However, for effective communication of information, it’s essential to provide context to those colors. This is where legends come into play. In this post, we are going to tackle the problem of adding a fixed legend to your Google Maps mashup that dynamically responds to browser resizing.

The Problem: Adding a Legend to Google Maps

Imagine you have a webpage featuring a Google Maps mashup with color-coded pushpins indicating specific days of the week (such as Monday, Tuesday, etc.). When users interact with or resize their browser window, maintaining clarity about what those colors represent can become tricky, especially without a legend. The challenge is to create a legend that remains anchored in place despite resizing links or changes to the window size.

The Google Maps API offers a GScreenOverlay class as an option, but it only allows for image overlays. Fortunately, there’s a way to create a Custom Control that will allow us to use a DIV element containing text. Let’s dive into the solution.

Solution: Creating a Custom Control for a Legend

Step 1: Define Your Custom Control

To add a customized legend, we’ll need to define a new custom control using JavaScript. The following code will create a 150w x 100h box with a gray border and a white background. Inside this box, you will place the desired text.

function MyPane() {}
MyPane.prototype = new GControl;
MyPane.prototype.initialize = function(map) {
  var me = this;
  me.panel = document.createElement("div");
  me.panel.style.width = "150px";
  me.panel.style.height = "100px";
  me.panel.style.border = "1px solid gray";
  me.panel.style.background = "white";
  me.panel.innerHTML = "Hello World!";  // Swap out this text for your legend
  map.getContainer().appendChild(me.panel);
  return me.panel;
};

Step 2: Position Your Legend

For your legend to stay fixed in the desired location on the map, we’ll need to define its default position. This example pins the legend to the top right corner with an offset of 10 pixels down and 50 pixels from the right.

MyPane.prototype.getDefaultPosition = function() {
  return new GControlPosition(
      G_ANCHOR_TOP_RIGHT, new GSize(10, 50));
      // Make sure to use underscore "_" for G_SIZE and not HTML entity
};

Step 3: Complete the Division Definition

Finally, ensure that the custom control can return the panel we just created. This allows the map to render it correctly.

MyPane.prototype.getPanel = function() {
  return me.panel;
}
map.addControl(new MyPane());  // Add your custom legend control to the map

Step 4: Customize Your Legend

Feel free to customize the text for your legend as well as the styling to meet your visual needs. Update the innerHTML property with relevant information about the color coding you are using in your pushpins.

Conclusion

Adding a fixed legend to your Google Maps mashup can significantly enhance the user experience by providing necessary context for the map data. With a bit of JavaScript and the Google Maps API, you can effectively implement a custom control that remains anchored in the desired position, no matter how the user interacts with the page.

This tutorial highlights just one of the many possibilities you can explore with Google Maps. Whether you’re looking to add legends, markers, or custom overlays, the key is understanding how to interface with the Google Maps API effectively.

By using these steps, you can ensure your maps are both informative and interactive. Happy mapping!