CODEWITHSUNDEEP
imagehtmlcssbackgroundgoogle-maps-api-3
apoo
apoo

Reputation: 15

How add a background picture for a DIV, Google maps Custom Controls

I am trying to create a image for google's custom controls. When I assign a background picture in a css, it breaks, otherwise it works.

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);

You can also see it here: http://jsfiddle.net/k3Jjw/

Upvotes: 1

Views: 4199

Answers (1)

plexer
plexer

Reputation: 4622

Two simple problems:

  1. You need an explicit height and width on your control - background images don't cause the DIV to grow to fit them.

  2. The image URL you used does not exist (I get 404).

If you use the following code, you should see an image control in the top left:

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);

Great work posting the JSFiddle link - it made this question easy to answer.

Upvotes: 4

Related Questions