OpenLayers OSM
HTML
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<script src="http://openconcept.ca/sites/openconcept.ca/files/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openconcept.ca/sites/openconcept.ca/files/OpenLayers.css">
<div id="map-div"></div>
CSS
html, body, #map-div {
height: 100%;
width: 100%;
}
JavaScript
(function($) {
map = new OpenLayers.Map({
div: 'map-div',
projection: new OpenLayers.Projection('EPSG:900913'),
'displayProjection': new OpenLayers.Projection('EPSG:4326')
});
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var longitude = -75.702;
var latitude = 45.423;
var centerlonlat = new OpenLayers.LonLat(longitude, latitude);
centerlonlat = centerlonlat.transform(map.displayProjection, map.projection);
var zoom = 15;
map.setCenter(centerlonlat, zoom);
})(jQuery);