I am new to polymer js.
I am trying to build an application that integrates google maps.
I had tried using bower dependency by the command bower install PolymerLabs/google-map --save and imported the dependency html in my polymer element and used the custom google-map tag
The end result is a empty page and i didnot get any maps on the html page.
I tried all means but i am unable to get the map.
Can anyone help me cross this hurdle,
Thanks in advance
Try this:
<google-map latitude="37.77493" longitude="-122.41942" style="height:600px">
</google-map>
In order to work properly, the <google-map> tag requires certain attributes like latitude and longitude coordinates as well as a style:height.
Also, more than one <google-map> tag on the same page breaks everything and neither map renders properly.
Related
this is more of how does it work question than a problem.
I building a polymer app and need to use jQquery text function. So I simply call $(this.variable).text(). It all works perfectly.
When removing this script include :
I receive the below error
Uncaught ReferenceError: $ is not defined
Nowhere else I include jQuery. So my questions are : If another script includes jQuery does it make jQuery included in hte current app? Does Polymer never includes jquery?
Currently, scripts included in a web component execute in the global scope. That is to say while shadow DOM sandboxes HTML and CSS, it does not currently do that with scripts. There is some discussion of this type of isolation occurring, but it appears to be long off.
So if any web component included jQuery in the global scope - it would be available to any other web component.
While any particular polymer element COULD include jQuery, I've yet to see one that does. The Polymer library itself most certainly does not include jQuery.
The thing with phonegap is that it uses it's own API via phonegap.js that is declared at the head of the index.html page.
When using window.open and it's alternatives, the new page will forget anything from the previous one, and phonegap's API would no longer be accessible.
What is the right way to open a new html file?
I really find it hard to believe that phonegap apps have to be one huge html file.
Does your phonegap app need to open a new page? The idea of phonegap is 1-page app. Meaning that to change the view, you don't need to reload the whole DOM tree. Rather you load your DOM only once and then manipulate objects inside it.
You can move to another html page by this code:
window.location = "NewFile.html";
The polymer app that is generated when "JavaScript Polymer custom element" is selected as the project type in Chrome Dev Editor's "New Project" dialog displays a blank screen when run.
Is this a bug or am I doing something wrong?
If it is a bug, then how would I get the polymer app to display something?
Judging by your description, it sounds like you are forgetting to refactor for CSP. Right click on your project name, and select Refactor for CSP. This will take a while, but when it's done, it will work.
Sorry for the delayed response.
Please try the up-to-date Chrome Dev Editor. It's possible that the mentioned template was broken and got fixed since you've submitted the question.
Also make sure that you either:
have index.html or demo.html selected when clicking the Run button; or
right-click on of them and select Run... from the context menu.
What might have happened is that you confused Polymer element with a Polymer app. The template that've you used generates an element. It also provides an example of the element's usage in form of demo.html, and a standard Polymer element description page (based on the core-component-page element that reads and displays elements properties from the metadata.html) in form of index.html. So you have to explicitly run one of those to see something. If you attempt to "run" the element itself (say, click the Run button with my-element.html selected), you will see a blank screen, just like with any other pure Polymer template, because there is no renderable HTML in there (it's called a template for a reason).
If you do indeed want a Polymer app, consider using JavaScript web app (using Polymer paper elements) or JavaScript Chrome app (using Polymer paper elements) project types.
Try at first, to run the bower update from your command line
bower install Polymer/core-elements --save
And you might also need to right click on your project directory from the right panel of chrome dev editor and select Refractor for CSP.
Possibly in the example app, the CDE project (bower.json level) was in a subdirectory of the directory that you imported into the editor. Try to import a level deeper instead.
For the past 3 months I have been struggling with the Google sites "insert html box" to get the CDN to serve the Jquery user interface library-jqueryui- without any success.
I have used the following code and its variants without any themes but to no avail;
The jquery library loads fine but not the jqueryui library. The Google developer site suggests that this should work, but I only get these error messages - failed to load external url jquery-ui.css OR folding element body into parent
What am I doing wrong?? Getting frustrated here!
Apparently this is a known bug. Take a look at the answer here
There is a bug link to the actual issue and a possible workaround.
Following the hint about jQuery not always working in HTML boxes, I experimented and found that some versions of jQuery UI will load!
As of today, I was able to load the following versions:
1.8.21,
1.8.20,
1.8.18
or, using the direct links to Googleapis:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.20/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
All other versions mentioned on https://developers.google.com/speed/libraries/ would not load.
That being said, I encountered more trouble when trying to link to the CSS themes. I couldn't find any way to get an HTML box to accept links to googleapis hosted jQuery UI CSS files.
I tried pasting the CSS directly into the HTML box, but the url() links to images are not kosher. Commenting them out resulted in my getting the HTML box editor to be at peace, but the attempt to make tabbed panes work was not successful.
To say that one can do jQuery inside a Google Site is almost an exaggeration.
Im using the Google Maps Wizard to customize the color of some maps I need to embed on an website.
I got some JSON that loads ok but if I need to make a change I need to touch the code and load the map every time I change a value to see the results.
Is there any way I can load the styles I already have on a .js file into the Google Maps Wizard or is there any third party tool that allow me to do that?
http://www.mapstylr.com/ is a better solution. It has a load option so you can paste your current style and continue with it.
Besides, it lets you save the map and publish it. They have a showcase to browse and download styles other people did.
Just stumbled upon this Github project which is a version of the original styled maps wizard with json import functionality:
http://instrument.github.io/styled-maps-wizard/