DIV에 대한 배경 그림을 추가하는 방법, Google지도 사용자 지정 컨트롤

Question

Google의 사용자 지정 컨트롤 용 이미지를 만들려고합니다. CSS에서 배경 그림을 지정할 때 끊어 지거나 그렇지 않으면 작동합니다.

var latlng = new google.maps.LatLng(-34.397, 150.644); 
var myOptions = { 
    zoom: 8, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 


var myLocationControlDiv = document.createElement('DIV'); 

var controlUI = document.createElement('DIV'); 
//controlUI.style.borderWidth = '20px'; 
//controlUI.style.backgroundColor = 'black'; 
//controlUI.style.borderStyle = 'solid'; 
//controlUI.style.cursor = 'pointer'; 

//controlUI.style.backgroundImage = "url(/img/icons/pin.png)"; 

controlUI.title = 'Click to set the map to Home'; 
myLocationControlDiv.appendChild(controlUI); 

map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlUI); 

또한 여기에서 볼 수 있습니다 http://jsfiddle.net/k3Jjw/

Answer 1

두 가지 간단한 문제 :

1. 당신은 당신의 통제에 대한 명시적인 높이와 폭을 필요 - 배경 이미지에 DIV 발생하지 않습니다 그들에 맞게 성장하십시오.

2. 사용하신 이미지 URL이 없습니다 (404 번 표시). 다음과 같은 코드를 사용하는 경우

, 당신은 왼쪽 상단에 이미지 컨트롤 표시되어야합니다

var controlUI = document.createElement('DIV'); 
controlUI.style.cursor = 'pointer'; 
controlUI.style.backgroundImage = "url(http://dummyimage.com/100x100)"; 
controlUI.style.height = '100px'; 
controlUI.style.width = '100px'; 
controlUI.title = 'Click to set the map to Home'; 
myLocationControlDiv.appendChild(controlUI); 

위대한 작품은 JSFiddle 링크를 게시를 - 그것은 대답 할이 질문에 쉽게했다.