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

2つの単純な問題：

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リンクを掲載 - それは答えることが、この質問は簡単に。