Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Has anyone else noticed a problem getting OpenLayers to work within jsFiddle?

I can't see what's wrong with

or the others I've mentioned here:

But it's frustrating when they work fine as a static HTML document but not in a social, sharable format like jsFiddle.

EDIT: Don't assume that works and be cautious with using 100% widths/height on CSS for the map in jsFiddle.

share|improve this question
up vote 3 down vote accepted

Two things are missing in your example: a call to init (it's defined but not called) and some styling to make the map height larger than zero. Here's a working example:

share|improve this answer
Thanks @Alex - this helped considerably. Two jsFiddle quirks though. 1) I don't know why init() wasn't already being called from the <body> tag. 2) If the height/width are set in CSS to 100% it doesn't doesn't always display. I am still baffled by & but have managed (with your help) to get others working alright. – Mike Gifford Apr 10 '12 at 13:47

This is the way i do it.

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

I played with this a bit essentially to split it up a bit more into html, css & javascript. It is working there, partly because the init() isn't called in your script. Thanks though. Useful to have this example too. – Mike Gifford Apr 10 '12 at 14:00

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.