JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js"></script>
<a href="#" onclick="javascript:show1()">show me NY</a>
<a href="#" onclick="javascript:show2()">show me TLV</a>
<a href="#" onclick="javascript:map.zoomToExtent(map.getMaxExtent());">show world map(a "workaround"</a>


<div id='myMap' style="height: 600px; width: 600px; position: relative"></div>

JavaScript

map = new OpenLayers.Map("myMap", {
    controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.PanZoomBar()
    ]
});

var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
    key: 'd5da652e33e6486ba62fca3d18ba70c9'
});
map.addLayer(cloudmade);

var epsg4326 = new OpenLayers.Projection("EPSG:4326");

map.setCenter(new OpenLayers.LonLat(40, 32), 2);

show1 = function(){
var bound1 = new OpenLayers.Bounds(-8236567.917898,4972686.066032,-8236148.409989,4972889.624407);
    map.zoomToExtent(bound1); // to NY
};

show2 = function(e){
    var bound2 = new OpenLayers.Bounds(3874818.203389,3773932.267033,3875217.305962,3774226.370443);   
    map.zoomToExtent(bound2); // to Israel
    return false;
};