LEAFLET: Custom images in the Layer Control Tutorial?

[Balboa1990]

I have followed the leaflet tutorial on how to create Layer Control and the custom markers:

Markers:http://leafletjs.com/examples/custom-icons.html Control: http://leafletjs.com/examples/layers-control.html

I am using the control code and i would like to add my custom marker to this. When applying the code it the map goes blank and breaks. Im not sure if it's something do to with the positioning with the "add to map" and "bindpopup". Any help would be great.

CODE:

[CLOUDMADE API KEY AND INFO HERE]

var officeIcon = L.icon({
    iconUrl: 'images/office1.png'
});

var london = L.marker([51.3512542357518,-0.461769104003906],{icon: officeIcon}).addTo(map).bindPopup('<b>Office Address</b>');


var cities = L.layerGroup([london]);

var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 22677}),
midnight  = L.tileLayer(cloudmadeUrl, {styleId: 999}),
motorways = L.tileLayer(cloudmadeUrl, {styleId: 46561});

var map = L.map('map', {
center: new L.LatLng(54.980000,-1.5975022315979004),
zoom: 10,
layers: [minimal, motorways, cities]
});

var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight,

};

var overlayMaps = {
    "Motorways": motorways,
    "Display Markers": cities
};

map.addControl(new MyControl());
L.control.layers(baseMaps, overlayMaps).addTo(map);

[Benjamin Dirks]

have a look at this code:

var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight,

};

The "," after midnight might kill IE.