I'm using the Polymer 1.0 new feature called iron-pages which is considered as the migration from core-pages (0.5 version ) to build a single pages admin dashboard . One of my selected items should refer to google-map .
The problem is that when i select the map item to show google-map section , all is gray ?
I need a solution that works on Polymer 1.0
This might be what you are looking for: google-map main site and on github
<google-map latitude="37.77493" longitude="-122.41942" fitToMarkers>
<google-map-marker latitude="37.779" longitude="-122.3892"
draggable="true" title="Go Giants!"></google-map-marker>
<google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
</google-map>
Related
I'm having problems with app-route (mainly because I don't understand it).
The specific issue I'm having is changing the url/route. I'm using an iron-selector on an app-drawer to change the iron-page view. The view is switching, but the url is not updating. The other issue is that in one of my views I need to switch to a detail-view (think /events -> /event/:id). I am not sure of the correct way to change a view inside a view.
Enough talk - lets look at some code
The structure of the application is as follows:
/login
/admin
/admin/view1
/admin/view1/:id
/admin/view2
/user
/user/view1
/user/view1/:id
/user/view2
my-app has an iron-pages element that holds the views for login-page, admin-portal, and user-portal. admin-portal and user-portal each have iron-pages that holds view1, view2, etc.
user-portal
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/user/:view"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-selector attr-for-selected="name" selected="{{routeData.view}}" fallback-selection="clinics">
<vaadin-item name="clinics">
<iron-icon icon="vaadin:list-select"></iron-icon>
Virtual Clinics
</vaadin-item>
<vaadin-item name="settings">
<iron-icon icon="vaadin:cog-o"></iron-icon>
Settings
</vaadin-item>
<vaadin-item name="help">
<iron-icon icon="vaadin:info-circle-o"></iron-icon>
Help
</vaadin-item>
<vaadin-item name="logout">
<iron-icon icon="vaadin:exit-o"></iron-icon>
Sign Out
</vaadin-item>
</iron-selector>
<iron-pages selected="[[routeData.view]]"
attr-for-selected="name"
selected-attribute="visible"
fallback-selection="view404">
<user-clinic-list-view name="clinics" events="{{events}}" user="{{user}}"></user-clinic-list-view>
<user-clinic-view name="event" route="{{subroute}}"></user-clinic-view>
<user-setting-view name="settings" route="{{subroute}}"></user-setting-view>
<user-help-view name="help" route="{{subroute}}"></user-help-view>
<my-view404 name="view404"></my-view404>
</iron-pages>
user-clinic-list-view
In this view I have an iron-list with a button that needs to take me to user-clinic-view but where I change the route to something like /event/:id
I have tried
I have also tried
window.history.pushState({}, null, '/user/event/:id');
window.dispatchEvent(new CustomEvent('location-changed'));
This seems like a very basic web application, and yet the routing in Polymer is so confusing and there are no examples of deep routing. Every example I've seen is only 1 layer deep (like the starter kit).
What are some best practices for routing?
I have included api, before everything were working perfect in polymer 1.7, after upgraded to polymer ^2.0 google map does not renders.
here is my code in main app page written polymer class base:
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
<jj-maps name="maps" user="{{user}}" sprof="{{sprof}}"></jj-maps>
<jj-list name="list" > Jobs </jj-list>
<jj-infos name="infos"> infos </jj-infos>
<jj-contacts name="contacts" > Contacts </jj-contacts>
<jj-messages name="messages"> Messages </jj-messages>
<jj-404 name="404" > 404 </jj-404>
</iron-pages>
at jj-maps.html code sample is :
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/google-map/google-map-marker.html">
style codes in template tag:
<dom-module id="jj-maps">
<template>
<style include="iron-flex iron-flex-alignment">
:host {
.....
google-map, #mapResults {
margin-top: 10px;
position: relative;
height: 100vh;
width: 100vh%;
z-index: 1;
}
....
<div id="mapResults">
<google-map
id="map"
map="{{map}}"
latitude="[[latitude]]"
longitude="[[longitude]]"
zoom="10"
api-key="[[myApiKey]]"
on-google-map-ready= '_mapLoaded'
additional-map-options='{"gestureHandling" : "greedy"}'
>
<google-map-marker map="{{map}}" slot="marker" latitude="{{latitude}}" longitude="{{longitude}}"
title="You are here !" icon="./src/image/gpslocc.png" draggable="true">
</google-map-marker>
<template is="dom-repeat" items="{{sprof}}" as="item">
<google-map-marker map="[[map]]" slot="marker" latitude="[[item.myLat]]" longitude="[[item.myLng]]" animation="DROP" click-events title="{{item.prof}}" icon="{{calculateIconType(item.isFree)}}" on-google-map-marker-click='showUserDetail' userid="[[item.uid]]" isFree="{{item.isFree}}" >
</google-map-marker>
</template>
<paper-fab icon="maps:my-location" on-tap="updateCurrentPosition"></paper-fab>
</google-map>
</div>
</template>
this code works perfect in previous polymer. And Another point when I bower install the dependencies as bower install --save GoogleWebComponents/google-map
bower asks me for two as :
- Unable to find a suitable version for polymer, please choose one by typing one of the numbers below:
I chose : 7) polymer#^2.0.0 which resolved to 2.0.1 and is required by myApp
- Unable to find a suitable version for webcomponentsjs, please choose one by typing one of the numbers below:
I chose : 2) webcomponentsjs#^1.0.0 which resolved to 1.0.1 and is required by myApp
Sorry in advance that I ve written detailed codes. Meanwhile I have tried many options but could not able to render map in my jj-maps elements (class base template, even I have tried legacy template (as same as polymer 1.7 ver)
Here is is console warning :
dom-module.html:24 dom-module google-map has style outside template
dom-module google-map-marker has style outside template
Maps are not rendering...
So, how to solve ? Thanks in advance. (previous polymer ver. working at jobijoy.com
I'm having exactly same issue. Tried to add slot="marker" to google-map-marker as someone suggested Polymer 2.0 issue in github but doesn't work for me. It looks like the google-map component's size is set to 0 by 0 thus does not display at all. Since the google components are not updated to be compatible with Polymer 2.0. I've manually updated my local google-map.html and google-map-marker.html files under bower_component folder and moved the style tags into the template tags. The warnings are gone and the map displays now. I guess we have to wait for the update of the google components for things to work properly. I hope this helps.
slot="marker"
should solve the issue.
Unfortunately the example in the code does not insert this important line.
Here is the without slot="markers" current code example:
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
<google-map-marker latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
</google-map-marker>
<google-map-marker latitude="37.777" longitude="-122.38911">
</google-map-marker>
</google-map>
And below the suggested corrected example that should be inside the code:
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
<google-map-marker slot="markers" latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
</google-map-marker>
<google-map-marker slot="markers" latitude="37.777" longitude="-122.38911">
</google-map-marker>
</google-map>
What is happening?
google-map does not know when markers are inserted or updated because without the attribute slot="markers" they are inserted outside the slot where they should be inserted in.
Several consequences can happen from this issue: the map can be viewed, but not respond to important events, like fit-to-markers.
In these turbulent moves from original without-slots version to the current slotted version (and soon moving to polymer 3.0 version) of the excellent google-map webcomponent, there is a high chance that the busy developers simply forgot to add this important slot="markers" attribute in the example that shows how to add each new google-map-marker webcomponent inside google-map.
This only complements the already correct above answer. If anyone needed more explanation, I offer these, If I am correct, of course (please correct me if I made wrong conclusions).
You can detect this flaw inspecting your google-map element. Without the slot="markers" correction, open google-map; inside it, open iron-selector; and finally inside it open the element <slot id="markers" name="markers"><slot>. If you do not use the suggested correction, this slot will be empty. If you use this suggested correction, this slot will contain references to each google-map-marker. And so the google-map element will be able to handle several events that rely on detecting when each marker is inserted or updated.
Sorry for the long answer.
In a simple routing configuration in Polymer, like that obtained from the starter-kit:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
and a view with a button which if pressed should change the route, like this:
<dom-module id="my-view1">
<template>
<paper-button raised on-tap="changeRoute">Change route</paper-button>
</template>
<script>
Polymer({
is: 'my-view1',
changeRoute() {
// How to change route here?
}
});
</script>
</dom-module>
how can I change the route programmatically, in the event handler above? I tried changing window.location without success (I'm inside Electron, not sure if it's part of the problem).
From the Polymer docs, about changing routes:
Updating the route. The route object is read-write, so you can use
two-way data binding or this.set to update the route. Both the route
and routeData objects can be manipulated this way. For example:
this.set('route.path', '/search/');
Or:
this.set('routeData.user', 'mary');
but this is correct (and works) if done inside the main component (the one that defines the routes), while it doesn't work if called inside a view. Another way to put this question maybe is: how can I access the main router object from an inner component?
There's a few ways to do this, I may have gone overboard but I started to get into it so here goes...
Based on the answer you gave it looks like you just want to "go back". If that's the case you could just use
history.back();
Or if you want to move to a new path then a more robust, including more SEO friendly approach (I believe) is to use something like:
<a href="/newpath" tabindex="-1">
<paper-button>Change Route</paper-button>
</a>
Or the answer by #Carlos works too, but the app-route "philosophy" seems to be more about allowing a decentralized routing approach & so passing an event up to let another component handle the route feels kind of like it's going against the grain. Although this is not necessarily the case since a component can be quite simple, maybe just a button, icon, etc, so you would probably want routing handled by a parent element. In this case though it looks like your component is a full view so I'd lean more towards it being a case where it might handle the routing itself.
I'd also say something similar to the above for #tony19's answer as well.
I think the biggest drawback of the approach in your own answer is that you're digging in the guts of another element so you've tightly coupled to it. That one is definitely not recommended.
Oh & one more way to change the route:
window.history.pushState({}, null, '/new_path');
window.dispatchEvent(new CustomEvent('location-changed'));
This is given here - https://github.com/PolymerElements/app-route#integrating-with-other-routing-code But this is really more for working with other routing code or special situations & would be pretty hacky in your case.
Uhm. Turned out it was not so difficult:
document.querySelector("main-window").set('route.path', "/");
where main-window is the container component that defines the routes (first source file).
Does anyone have a better/more general approach to this problem?
I had the same issue and solved it like by adding the routing-elements to the views as well:
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/app/:view" data="{{routeData}}" tail="{{subRoute}}"></app-route>
<app-route route="{{subRoute}}" pattern="/:id" data="{{idData}}" active="{{onDetailPage}}"></app-route>
then you can change the route from within the element like this:
this.set("route.path", "/app/foo");
Your 'view1' could fire a custom event that would trigger a route change in your app.
This would follow the observer pattern recommended in: Thinking in Polymer (The Polymer Summit 2015)
Note: the answer to this question may also help you.
You can easily do so with the path property of the app-location's element:
changeRoute() {
var $router = this.shadowRoot.querySelector("app-location");
$router.path = "/view1";
}
Here the element's documentation app-location:
Setting the path property will fire up the path-changed event... This will begin the events' cascade to the iron-pages element and switch the view.
I've been having problems trying to work with paper-icon-button with Polymer. My code so far is very simple. The website generates the space that the icon uses and reacts with the right behaviour to respond to the mouse's events but the icon doesn't show up
<paper-toolbar class="gallery_header">
<paper-icon-button icon="menu"></paper-icon-button>
<span title class="flex">Admin</span>
</paper-toolbar>
The scripts that are being loaded in order are:
webcomponentsjs
polymer
iron-icon
bootstrapiron-ajaxiron-imagepaper-drawer-paneljquerypaper-header-panelpaper-stylespaper-icon-buttonpaper-toolbarreact
What you need to do extra in order to make that menu icon appear is to import the iron-icons element which is just a collection of SVG icons. For more information about the iconsets and the iron-icons element, you can check out Rob Dodson's episode on this topic from the Polycasts series.
help me please ,I generated multiple markers by using core-ajax, the default markers are shown well, but want to add the custom marker instead of the default red marker
<template repeat="{{x in views}}">
<google-map-marker latitude="{{x.lat}}" longitude="{{x.long}}"
draggable="false">
<img src="1.png" height="20px" width="20px">
</google-map-marker>
</template>
as mentioned in the tutorial this but is not working
I got this answer and dont know why people -ve the question about the google-map marker
Solution
we just add the specified icon using the icon attribute in the google-map-marker
<google-map-marker latitude="{{x.lat}}"
longitude="{{x.long}}"
draggable="false"
icon="components/elements/imagename.png"
title="{{x.VDC}}-{{x.area}}">
</google-map-marker>