Custom Controls

Apart from customizing the existing Google Maps API controls’ style, behavior, and position, users can also create their own control elements.

Create custom controls

Here are a few guidelines that must be followed when creating effective custom controls:

• Write clean and correct Cascading Style Sheets (CSS) to display the control elements.
• Think of all the possible interactions between the user and map. Handle the associated user events and changes in map properties through event handlers.
• Use a div element to define the control. Insert the div element inside the controls property of the map object.

It’s recommended that all stylings of control are placed in a single <div> element so that the control can work as a single unit.

Note: Some understanding of the CSS and DOM structures is required to create controls that are appealing to the user.

Here’s a code snippet of a simple custom control where one <div> is used for the button’s outline and another for the button’s interior:

// Create a div to hold the control.
var controlDiv = document.createElement('div');

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);
...

The addDomListener() method handles cross-browser events. Here’s a code snippet for an event listener that listens to a browser’s click event:

// Setup the click event listener
var chicago = {lat: 41.850, lng: -87.650}; // Coordinates of Chicago

controlUI.addEventListener("click", () => {
	map.setCenter(chicago);
});

Code example

Here’s an example of a map with a “Center Map” custom control which centers the map on Chicago whenever it’s pressed:

Here’s a brief explanation of the JavaScript file in the above code widget:

• line 4: We define the CenterControl function that takes in the controlDiv parameter which will hold the center control.
• Line 6: We initialize a div, controlUI, to hold the center control’s border.
• Lines 7–15: We define the CSS styling and title for the control border.
• line 16: We append the control border div as a child of controlDiv.
• Line 19: We initialize a div, controlText, to hold the center control’s interior.
• Lines 20–26: We define the CSS styling and inner HTML for the control interior.
• Line 27: We append the control interior div as a child of controlUI.
• Lines 30–32: We add an event listener to the custom control, which listens to any click events on the custom control. When it triggers, this listener will center the map on Chicago.
• Line 43: We create the div for holding the custom control.
• Line 44: We pass this div to the CenterControl().
• Line 45: We define the position of the custom control to be at the top of the map using ControlPosition.TOP_CENTER.