Openlayers 3 map not displaying

I cannot get openlayers 3 to display.
After installation, i go to Structure->Openlayers and the default UI map does not display. It seems to make space for the block but it is just white space. Please see image to see what i mean.

These are the steps i took to get to this position.

From a clean install of Drupal 7:
Installed and enabled ctools 7.x-1.11
Installed and enabled views 7.x-3.14 (incl. views content panes)
Installed and enabled Libraries 7.x-2.3
Installed and enabled Registry Autoload 7.x-1.3
Installed and enabled Service Container 7.x-1.0-beta5 (incl. Services Container Annotation Discovery and Symfony's Services Container)
Installed and enabled Libraries CDN API 7.x-1.7
Installed and enabled geoPHP7.x-1.7
Downloaded geoPHP library and extracted to sites\all\libraries – renamed folder from phayes-geoPHP-6855624 to geoPHP
Installed and enabled Geocoder 7.x-1.3
Installed and enabled jquery update 7.x-2.7
Installed openlayers 7.x-3.1
Enabled openlayers (incl. openlayers block, openlayers block switcher, openlayers content types, openlayers contextual links, openlayers field, openlayers UI, openlayers views).

If i check the " Load javascript debug integration files " checkbox then i get map control buttons appear, but still no map.