Google지도 상단에 버튼 추가

Question

지도, 위성 및 하이브리드 버튼 옆에 Google지도 상단에 버튼을 배치하고 싶습니다.

가능한지 궁금한 점이 있었고 어떻게 할 수 있을까요?

클릭 할 수있는 Google지도 상단에 이미지가 오버레이되어 있지만 Google지도에서 모든 이벤트가 사라지게되는지 확실하지 않은 아이디어입니다.

어떻게 할 수 있습니까?

Answer 1

이 작업을 수행하는 방법에 대한 설명이 상당히 있습니다. here.

저는이 녀석들을 표준 단추처럼 보이게 만들 수 있다고 확신합니다. 그리고 당신은 분명히 그것을 오른쪽 상단에 고정시킬 수 있습니다. 기회가 생기면 결과를 알려주고 업데이트 해 보겠습니다.

업데이트 :

나는이 밖으로 시도 할 수있는 기회를했고 그것은 확인을 작동 : 기본적으로 당신이 구현 매우 비슷한 일을 끝낼

• Map example with Google style buttons
• Javascript Source

버튼을 GControl을 사용하거나지도 위에 DIV의 절대 위치 지정을 사용합니다 (ChrisB 제안). 따라서 올바른 (또는 더 쉬운) 접근 방법이 없다고 생각합니다. 개인적인 취향의 문제 일뿐입니다. 행운을 빕니다.

Answer 2

Cannonade의 답변을 보완하기 위해 Google지도 컨트롤에서 사용하는 html/css를 소개합니다. CSS를 복제하면 실제처럼 보이게 할 수 있습니다.

공식 GControl을 만들 수도 있고 절대 위치 지정을 사용하여 Google지도 위에 배치 할 수도 있습니다.

활성 버튼 :

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 15.3em;" title="Show street map"> 
    <div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;"> 
     Map 
    </div> 
</div> 

비활성 버튼 :

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;" title="Show imagery with street names"> 
    <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;"> 
     Hybrid 
    </div> 
</div> 

---

UPDATE :이 수행 할 수있는 Google지도 유틸리티 라이브러리 확장이- ExtMapTypeControl

Answer 3

을

나는 또한 똑같은 문제를 겪었습니다. 이것이 제가 한 일입니다, Crea 테 버튼 및 Google지도 API의 사용되지 않는 버전으로 아래의 스타일에게 그것을

ID = "my_button이라는"

#my_button{ 
      position:absolute; 
      bottom:2%; 
      color: #fff; 
      background-color: #4d90fe; 
      padding: 11px; 

      border: 1px solid transparent; 
      border-radius: 2px; 
      box-sizing: border-box; 
      -moz-box-sizing: border-box; 

      outline: none; 
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
      alignment-baseline:central; 
      width:90%; 
      left:5%; 
      text-align:center; 
      text-decoration:none; 


      margin:0px auto;} 


     #my_button:hover{ 
      background-color:#3B6EC2;} 

Answer 4

허용 된 대답은 2009 년 (5 년 전)과 링크를 제공합니다.

나는이 예제를 발견 한 바로 그 질문을 검색하는 동안 : https://developers.google.com/maps/documentation/javascript/examples/control-custom

// Create the DIV to hold the control and 
// call the HomeControl() constructor passing 
// in this DIV. 
var homeControlDiv = document.createElement('div'); 
var homeControl = new HomeControl(homeControlDiv, map); 

homeControlDiv.index = 1; 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); 

Answer 5

은 다음과 같습니다 jQuery를 사용하여 : 첫째, 함수를 작성, 당신의 요소가 반환

function myButton(){ 
    var btn = $('<div class="my-button"></div>'); 
    btn.bind('click', function(){ 
     // logic here... 
     alert('button clicked!'); 
    }); 
    return btn[0]; 
} 

지도를 만든 후지도를 작성해야합니다.

map.controls[google.maps.ControlPosition.TOP_CENTER].push(myButton());