OpenLayers OSM

by Mike Gifford

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map-div"></div>

CSS

#map-div {
  width:100%;
  height:500px; // 100% Doesn't work
}

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 = -97.0928440;
    var latitude = 32.7478770;
    var centerlonlat = new OpenLayers.LonLat(longitude, latitude);

    centerlonlat = centerlonlat.transform(map.displayProjection, map.projection);
    var zoom = 15;
    map.setCenter(centerlonlat, zoom);

})(jQuery);