Geocoding and Custom Icons

Edit the code below and click "Try It Now" to display the result.

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
    <script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=ck2OXUAJsF0iz999XGQ62jyXo8AXOVp7"></script>
    <script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-geocoding.js?key=ck2OXUAJsF0iz999XGQ62jyXo8AXOVp7"></script>

<script type="text/javascript">
        window.onload = function() {

var map = L.map('map', {
                layers: MQ.mapLayer()
            });

MQ.geocode({
                map: map,
                icon: L.icon({
                    iconUrl: 'https://www.mapquestapi.com/staticmap/geticon?uri=mcenter.png',
                    iconSize: [ 22, 28 ],
                    iconAnchor: [ 11, 28 ],
                    popupAnchor: [ 0, -22 ]
                })
            }).search('lancaster pa');
        }
    </script>
</head>

<body style='border:0; margin: 0'>
    <div id='map' style='width: 100%; height:530px;'></div>
</body>
</html>