30 second google-map demo does not work as advertised

[adamvoss]

On the polymer-project home page, the learn section starts with a "30 sec" demo to show how to "Use Elements." However, issues prevent any user not already familiar with the element from completing successfully or in an amount of time close to 30 seconds.

However, if a user tries to actually run the demo, it fails because 'google-map.html' could not be found.
If a user then searches to try to find google-map.html hosted somewhere (exists on github, and github.io), it will fail with the referenced files because CORS in not enabled on the server.

Already the user will have invested far longer than 30 seconds without the demo actually working.
If polymer is going to feature a demo, I would expect for it to be possible to try the demo without too much additional work. In this case that would probably mean hosting "google-map.html" somewhere users wishing to try out the demo can use.

---

Continuing on, if a tenacious user does download google-map.html and all prerequisite pieces from somewhere (in my case I used the google-map bower package and links to that, they will find still be presented with a blank page (though all web requests will have been successful).

It was only by taking the HTML from a working, live demo, verifying I could rehost it, then selectively removing content that I was able to learn the demo requires the body element to have the fullbleed attribute.

Perhaps it would be better to use a simpler element for the 30-second demo to avoid that last issue?

A very similar example to the one on the home page can also be found in quickstart.md

[arthurevans]

You have a good point. At the very least, it should mention the bower install, and the paths should be corrected. I didn't have to add the fullbleed attribute myself. I did:

1. bower install google-map
2. Pasted the code into index.html.
3. Edited the paths to reflect the bower install location:

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

<!-- Import element -->
<link rel="import" href="bower_components/google-map/google-map.html">

<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>

@ebidel @robdodson @kevinpschaaf we should add the "bower install" step, and maybe add a back-up page with amore detailed version of the instructions?

[ebidel]

I think we can leave out the install step and link to the detailed page: https://www.polymer-project.org/docs/start/getting-the-code.html

+1 on making the snippet cut and pasteable. #3 looks good.

[robdodson]

👍

[adamvoss]

fullbleed was my fault. I saw the HTML and figured they were just snippets that should be inserted into an HTML page. As such, I stuck them in the body of the boilerplate html>head+body, in which case fullbleed is needed on the body element.
Putting the 3 lines directly in a file like @arthurevans indicated works without issue. I am not sure if my mistake will be a common one.

I like what @arthurevans suggests about changing the link to indicate it is a downloaded component. Seeing that that path for google-map.html goes a long way towards indicating how to get it. I initially hadn't known to use bower to get web components even though that was automatically how I grabbed webcomponentsjs.

Thanks!

[addyosmani]

At the very least, it should mention the bower install, and the paths should be corrected. I

👍

[ghost]

No longer seems relevant, closing.