CODEWITHSUNDEEP
google-maps-api-3
Evan
Evan

Reputation: 856

Re-position custom google map controls

So my question is similar to this one, but the answer there doesn't quite solve my issue. So I have 2 controls, and the first one can collapse/expand, so I want to reposition the second control right underneath the first when the first changes 'state'. (The other question has a fiddle that shows the issue. Click "Toggle", and all controls are on top of each other towards the right, then mouseover the zoom and the controls are repositioned properly).

Is there some event, or method that I'm missing to reposition these programatically? Like that other question mentions, when you hover over the zoom control for example, the controls reposition themselves, but I can't find how to manually fire that.

This is what I've tried, it works, but its clunky and makes the controls blink.

map.controls[google.maps.ControlPosition.LEFT_TOP].clear();
map.controls[google.maps.ControlPosition.LEFT_TOP].push(control1);  
map.controls[google.maps.ControlPosition.LEFT_TOP].push(control2);

Thanks!

Upvotes: 0

Views: 840

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117324

Basically this is no "issue", when you "reposition" the controls(controls are DOMNodes) you:

  1. remove the nodes from the document
  2. put them back into the document

...of course this will result in some visual effect(blink)

But there is no need to re-position the controls.

Usually you wouldn't have a problem when both DOMNodes would have a static position....but they are positioned absolute with fixed coordinates.

The simple solution: Put both DOMNodes into a wrapper and add the wrapper as control.

Demo(desired behaviour on LEFT_TOP):

function init() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 1,
    center: new google.maps.LatLng(0, 0),
    disableDefaultUI: true,
    noClear: true
  });

  map.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('ctrl'));
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(document.getElementById('ctrl_3'));
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(document.getElementById('ctrl_4'));
}
google.maps.event.addDomListener(window, 'load', initialize);
       html,
       body,
       #map_canvas {
         height: 100%;
         margin: 0;
         padding: 0
       }
       #map_canvas>div[id^='ctrl']{
         display:none;
       }
       div[id^='ctrl_'] {
         padding: 12px;
         background: #fff;
         margin: 0 2px;
         cursor: pointer;
         border:1px solid #000;
       }
       div[id^='ctrl_']:hover {
         height: 80px;
         background: red;
       }
       div[id^='ctrl_']:hover::after {
         content: 'collapsed #' attr(id);
         display: block;
       }
<div id="map_canvas">
  <div id="ctrl">
    <div id="ctrl_1">ctrl1</div>
    <div id="ctrl_2">ctrl2</div>
  </div>
  <div id="ctrl_3">ctrl3</div>
  <div id="ctrl_4">ctrl4</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=init"></script>

Upvotes: 1

Related Questions