Google 지도 매쉬업의 범례 수정

Question

요일(월요일, 화요일 등)별로 색상이 구분된 압정이 있는 Google 지도 매시업이 있는 페이지가 있습니다. 지도가 포함된 IFrame의 크기는 동적으로 조정되므로 브라우저 창의 크기가 조정되면 크기도 조정됩니다.

각 색상의 의미를 사용자에게 알려주는 범례를 지도 창 모서리에 넣고 싶습니다.Google 지도 API에는 GScreen오버레이 이 클래스는 내가 원하는 동작을 갖고 있지만 오버레이로 사용할 이미지만 지정할 수 있고 텍스트가 포함된 DIV를 사용하는 것을 선호합니다.예를 들어 브라우저 창 크기가 조정될 때 모서리를 기준으로 동일한 위치에 자동으로 유지되는 왼쪽 하단 모서리의 지도 창 위에 DIV를 배치하는 가장 쉬운 방법은 무엇입니까?

Answer 1

자신만의 사용자 정의 컨트롤을 추가하고 범례로 사용할 수 있습니다.

이 코드는 150w x 100h 크기의 상자(회색 테두리/흰색 배경)와 그 안에 "Hello World"라는 단어를 추가합니다.범례에서 원하는 HTML로 텍스트를 교체합니다.지도의 오른쪽 상단(G_ANCHOR_TOP_RIGHT) 10px 아래, 50px 위에 고정된 상태로 유지됩니다.

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!";
  map.getContainer().appendChild(me.panel);
  return me.panel;
};

MyPane.prototype.getDefaultPosition = function() {
  return new GControlPosition(
      G_ANCHOR_TOP_RIGHT, new GSize(10, 50));
      //Should be _ and not _
};

MyPane.prototype.getPanel = function() {
  return me.panel;
}
map.addControl(new MyPane());

Answer 2

나는 다음과 같은 HTML을 사용합니다.

<div id="wrapper">
   <div id="map" style="width:400px;height:400px;"></div>
   <div id="legend"> ... marker descriptions in here ... </div>
</div>

그런 다음 범례를 오른쪽 하단에 유지하도록 스타일을 지정할 수 있습니다.

div#wrapper { position: relative; }
div#legend { position: absolute; bottom: 0px; right: 0px; }

position: relative 포함된 모든 요소가 #wrapper 컨테이너 및 position: absolute 원인이 됩니다 #legend div를 흐름에서 "끌어서" 지도 위에 놓고 지도의 오른쪽 하단 가장자리를 지도의 하단에 유지합니다. #wrapper 마커 설명을 포함하기 위해 필요에 따라 늘립니다.