Basic map with Leaflet.js and OpenStreetMap

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Here data is provided by OpenStreetMap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<div id="map"></div>
<button id="myButton">Button</button>

CSS

#map { 
    height: 400px; 
}

#myButton{
    position:fixed;
    top:20px;
    right:20px;
    z-index:2000;
    height:40px;
    
}

//SRC CODE BELOW:
.leaflet-center {
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.leaflet-control-geosearch, .leaflet-control-geosearch ul {
	border-radius: 7px;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
	margin: 10px 0 0 0;
	padding: 5px;
	width: 100%;
	height: auto;
}
.leaflet-control-geosearch-msg ul {
	list-style: none;
	display: none;
	height: auto;
	background: none;
	padding: 0;
}
.leaflet-control-geosearch ul li {
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    margin: 2px 0;
    padding: 4px;
    font: 12px arial;
    text-indent: 4px;
}
.leaflet-container .leaflet-control-geosearch input {
	width: 100%;
	height: 28px;
	padding: 0;
	text-indent: 8px;
	background: rgba(255, 255, 255, 0.75);			
	border-radius: 4px;
	border: none;
}

JavaScript

// center of the map
var center = [-33.8650, 151.2094];

// Create the map
var map = L.map('map').setView(center, 3);

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);

L.GeoSearch = {};
L.GeoSearch.Provider = {};

L.GeoSearch.Result = function (x, y, label, bounds) {
    this.X = x;
    this.Y = y;
    this.Label = label;
    this.bounds = bounds;
};


L.Control.GeoSearch = L.Control.extend({
    options: {
        position: 'topcenter',
        showMarker: true,
        retainZoomLevel: false,
        draggable: false
    },

    _config: {
        country: '',
        searchLabel: 'search for address ...',
        notFoundMessage: 'Sorry, that address could not be found.',
        messageHideDelay: 3000,
        zoomLevel: 18
    },

    initialize: function (options) {
        L.Util.extend(this.options, options);
        L.Util.extend(this._config, options);
    },

    onAdd: function (map) {
        var $controlContainer = map._controlContainer,
            nodes = $controlContainer.childNodes,
            topCenter = false;

        for (var i = 0, len = nodes.length; i < len; i++) {
            var klass = nodes[i].className;
            if (/leaflet-top/.test(klass) && /leaflet-center/.test(klass)) {
                topCenter = true;
                break;
            }
        }

        if (!topCenter) {
            var tc = document.createElement('div');
            tc.className += 'leaflet-top leaflet-center';
            $controlContainer.appendChild(tc);
            map._controlCorners.topcenter = tc;
        }

        this._map = map;
        this._container = L.DomUtil.create('div', 'leaflet-control-geosearch');

        var searchbox = document.createElement('input');
        searchbox.id = 'leaflet-control-geosearch-qry';
        searchbox.type = 'text';
        searchbox.placeholder = this._config.searchLabel;
        this._searchbox = searchbox;

        var...