Google maps custom control always appears below the default controls - google-maps

Question

I'd like to add a custom map control to a Google Maps v3 map. My custom control is the grayed-out 'location' icon in the screenshot below.
The problem is that I need the custom control to be below the pan ('arrows') control, but above the pegman / street view control. I have tried setting "index = -3" on the div I'm using for the control (see the v3 custom control positioning docs), with no luck.
wrapperDiv = document.createElement('div');
/* Some code appends an image to wrapperDiv in my actual code */
wrapperDiv.index = -3;
map.controls[google.maps.ControlPosition.LEFT_TOP].push( wrapperDiv );
Any ideas?
Update - solution found
Using the answer, provided by geocodezip, my custom control is now between the pan control and pegman control:
Most of the controls are now further over to the left than normal, but there doesn't seem to be a way to work around that, as far as I can tell.
Follow-up question
Now that my custom control is in the right place, is there a way to make the pegman and zoom controls centered below the pan control, like they are in the first screenshot?

Answer 1

One idea/option (not optimal but does sort of what you want).
Put the pan control in the TOP_LEFT controls position.
Put the custom control at index -1 (before all the normal controls) in LEFT_TOP
from the documentation: Positioning Custom Controls:...snip...
The API places controls at each position by the order of an index property; controls with a lower index are placed first. For example, two custom controls at position BOTTOM_RIGHT will be laid out according to this index order, with lower index values taking precedence. By default, all custom controls are placed after placing any API default controls. You can override this behavior by setting a control's index property to be a negative value. Custom controls cannot be placed to the left of the logo or to the right of the copyrights.
var mapOptions = {
zoom: 12,
center: chicago,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: true,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
map = new google.maps.Map(mapDiv, mapOptions);
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv);
example
A second option, would be to create a custom zoom control, then you can control the order (I couldn't figure out how to access the pre-defined Google Maps controls, only to put the custom control(s) before or after them).
example custom zoom/pan control from this question on SO
var PanControl = new geocodezip.web.PanControl(map);
PanControl.index = -2;
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = -1;
map.controls[google.maps.ControlPosition.LEFT_TOP].push(PanControl);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv);
Example with a modified ZoomPanControl (just the pan control)
code snippet with code from above example:
var map = null;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
* #constructor
*/
function HomeControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home</b>';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to
// Chicago
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});
}
function initialize() {
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 12,
center: chicago,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: true,
panControl: false,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
map = new google.maps.Map(mapDiv, mapOptions);
var PanControl = new geocodezip.web.PanControl(map);
PanControl.index = -2;
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = -1;
map.controls[google.maps.ControlPosition.LEFT_TOP].push(PanControl);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
/**
* #param {string} tagName
* #param {Object.<string, string>} properties
* #returns {Node}
*/
function CreateElement(tagName, properties) {
var elem = document.createElement(tagName);
for (var prop in properties) {
if (prop == "style")
elem.style.cssText = properties[prop];
else if (prop == "class")
elem.className = properties[prop];
else
elem.setAttribute(prop, properties[prop]);
}
return elem;
}
/**
* #constructor
* #param {google.maps.Map} map
*/
function PanControl(map) {
this.map = map;
this.originalCenter = map.getCenter();
var t = this;
var panContainer = CreateElement("div", {
'style': "position: relative; padding: 5px;"
});
//Pan Controls
var PanContainer = CreateElement("div", {
'style': "position: relative; left: 2px; top: 5px; width: 56px; height: 56px; padding: 5px; overflow: hidden;"
});
panContainer.appendChild(PanContainer);
var div = CreateElement("div", {
'style': "width: 56px; height: 56px; overflow: hidden;"
});
div.appendChild(CreateElement("img", {
'alt': ' ',
'src': 'http://maps.gstatic.com/intl/en_ALL/mapfiles/mapcontrols3d5.png',
'style': "position: absolute; left: 0px; top: -1px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;"
}));
PanContainer.appendChild(div);
div = CreateElement("div", {
'style': "position: absolute; left: 0px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
'title': 'Pan left'
});
google.maps.event.addDomListener(div, "click", function() {
t.pan(PanDirection.LEFT);
});
PanContainer.appendChild(div);
div = CreateElement("div", {
'style': "position: absolute; left: 37px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
'title': 'Pan right'
});
google.maps.event.addDomListener(div, "click", function() {
t.pan(PanDirection.RIGHT);
});
PanContainer.appendChild(div);
div = CreateElement("div", {
'style': "position: absolute; left: 19px; top: 0px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
'title': 'Pan up'
});
google.maps.event.addDomListener(div, "click", function() {
t.pan(PanDirection.UP);
});
PanContainer.appendChild(div);
div = CreateElement("div", {
'style': "position: absolute; left: 19px; top: 37px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
'title': 'Pan down'
});
google.maps.event.addDomListener(div, "click", function() {
t.pan(PanDirection.DOWN);
});
PanContainer.appendChild(div);
div = CreateElement("div", {
'style': "position: absolute; left: 19px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;",
'title': 'Reset center'
});
google.maps.event.addDomListener(div, "click", function() {
t.map.setCenter(t.originalCenter);
});
PanContainer.appendChild(div);
return panContainer;
}
/** #param {PanDirection} direction */
PanControl.prototype.pan = function(direction) {
var panDistance = 50;
if (direction == PanDirection.UP || direction == PanDirection.DOWN) {
panDistance = Math.round(this.map.getDiv().offsetHeight / 2);
this.map.panBy(0, direction == PanDirection.DOWN ? panDistance : -1 * panDistance);
} else {
panDistance = Math.round(this.map.getDiv().offsetWidth / 2);
this.map.panBy(direction == PanDirection.RIGHT ? panDistance : -1 * panDistance, 0);
}
}
/** #enum */
var PanDirection = {
LEFT: 0,
RIGHT: 1,
UP: 3,
DOWN: 4
}
window["geocodezip"] = window["geocodezip"] || {};
window["geocodezip"]["web"] = window["geocodezip"]["web"] || {};
window["geocodezip"]["web"]["PanControl"] = PanControl;
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>