Как добавить фоновую картинку для DIV, Google maps Custom Controls

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 - на этот вопрос было легко ответить.