googlewebcomponents / google-map Goto Github PK
View Code? Open in Web Editor NEWGoogle Maps web components
Home Page: https://elements.polymer-project.org/elements/google-map
License: Other
Google Maps web components
Home Page: https://elements.polymer-project.org/elements/google-map
License: Other
Setting values on latitude/longitude updates the center of the map, however, panning the map with a mouse doesn't update the set value.
Hi, I've been playing around with the google map components and they're super awesome.
It would be nice if there were an event listener for when the google-map-search is done searching (basically a promise/future or something like a promise).
Suppose you have a google-map, a google-map-search, and an input. As is, you could bind the input to the search query and bind the result to the map. So, if you search for "Paris" for example, the map goes directly to Paris.
The question is, what if you don't do these bindings (cuz for example there are multiple ways to input a location and feed it to the map and you don't want these bindings to pollute each other). The current hacky way I found (there may be others I dunno) is to manually do Node.bind()
and Node.unbind()
but it's kinda inelegant, tedious, and doesn't generalize.
It would be nicer to be able to say in javascript something like, "oh, and when you're done searching, set the map's latitude and longitude to the result's latitude and longitude" like so...
var mapSearch = document.querySelector("google-map-search");
var map = document.querySelector("google-map");
mapSearch.addEventListener("search-completed", function(e){
map.latitude = mapSearch.result.latitude;
map.longitude = mapSearch.result.longitude;
});
Caused by #45 (issue does not exist with previous commit)
Panning the map fires 'center_changed' event, which updates this.latitude
and this.longitude
which are observed and calls this.updateCenter()
, which pans to this.latitude
and this.longitude
, and so on.
google-map-search only returns 1 result, and it only contains the latlng and a boolean, users can't access the place name or any of the other exciting PlaceResult fields they might want to use.
Alternatively, google-map-search could stay as is to support current users and a google-map-places element could be built that's a bit more robust.
Although demo.html and index.html import webcomponentsjs.min.js the tests still import platform.js.
I would love to see these components available to the dart community via a 'pub' package, instead of only a bower package.
<google-map-directions>
should work without a map, the results would just be accessed via response
so people can parse the results and build their own displays. If a map does exist, the existing logic should kick in to use the DirectionsRenderer.
I see no way to access the current latitude, longitude, or zoom properties - they are not published, and see no update events for them.
I was only able to do this via manually adding to google-map.html:
publish: {
latitude: {reflect: true},
longitude: {reflect: true},
zoom: {reflect: true}
}
Am I missing something or is this intentional?
Getting the following error when apiKey attribute is used in 'google-map' element.
Uncaught TypeError: undefined is not a function{main,places}.js:54 (anonymous function){main,places}.js:55 (anonymous function)
Here are my imports
`
And here how i used it in my code
<google-map map="{{map}}" zoom="13" apiKey="abc123" version="3.exp"></google-map>
<google-map latitude="NaN" longitude="NaN"></google-map>
Causes the call stack overflow.
Exception caught during observer callback: RangeError: Maximum call stack size exceeded
at Be (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:13:479)
at Object.S.trigger (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:15:145)
at Ly (eval at <anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:56:919), <anonymous>:112:288)
at Iy.K.la (eval at <anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:56:919), <anonymous>:110:280)
at Iy.Qm.(anonymous function).H (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:44:1755)
at cA.K.la (eval at <anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:56:919), <anonymous>:151:416)
at cA.Qm.(anonymous function).H (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:44:1755)
at cA.<anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:13:335)
at Object.S.trigger (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:15:206)
at cA.K.la (eval at <anonymous> (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/4/%7Bmain,places%7D.js:56:919), <anonymous>:152:183)
This looks like a Google Maps API issue however google-map
component can prevent this from happening by checking that latitude
and longitude
are numbers.
I'm new to using polymer - thanks for the great work. Regarding the google-map-marker element. I was wondering if it would make sense to add an event that gets fired when the marker is added to the DOM. It would be nice to be able to add a listener to catch new markers as they are added to set up handlers, etc. Maybe even pass the marker as part of the event.
this.fire('map-marker-added', {'marker': this.marker});
I experimented with adding the above call at the end of the contentChanged() function in "google-map-marker" and it seemed to work nicely. Maybe there is a performance issue in the case of lots of markers, not sure. Is there a better way to know when the google-map-marker element has added its marker to the DOM? Or a better way to get hold of the element when it is created. What event might I be looking for?
Note the paper-icon-button's on-tap handler inside the google-map-marker. If you move it outside of the google-map-marker, the binding works. But it does not work inside the google-map-marker. I'm hoping there's a quick fix.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Google Map demo</title>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-icons/maps-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/google-map/google-map.html">
<link rel="import" href="bower_components/google-map/google-map-directions.html">
<style>
#controlsToggle {
position: absolute;
left: 10%;
bottom: 10%;
}
</style>
</head>
<body fullbleed unresolved>
<polymer-element name="my-app">
<template>
<google-map latitude="37.779" longitude="-122.3892" minZoom="9" maxZoom="11" fit>
<google-map-marker latitude="37.779" longitude="-122.3892"
title="Go Giants!" draggable="true">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/49/San_Francisco_Giants_Cap_Insignia.svg/200px-San_Francisco_Giants_Cap_Insignia.svg.png" />
<paper-icon-button icon="folder" on-tap="{{tapped}}"></paper-icon-button>
</google-map-marker>
</google-map>
<google-map-directions startAddress="San Francisco" endAddress="Mountain View"></google-map-directions>
</template>
<script>
Polymer('my-app', {
tapped : function() {
window.alert("hello world");
}
});
</script>
</polymer-element>
<my-app></my-app>
</body>
</html>
I think that line 144 in google-map.html may the the culprit. I'm guessing there's some additional initialization that has to happen in the InfoWindow object for it to recognize the polymer elements completely.
this.info.setContent(content);
But, the paper-icon-button does display...The event binding just doesn't work.
I was fiddling with google-map-marker
to get the animation working but got nowhere so I tried using Google Maps API with Polymer's google-map
but still no luck.
<polymer-element name="my-map">
<template>
<style>
google-map {
display: block;
height: 100%;
width: 100%;
}
</style>
<google-map id="map" zoom="3" latitude="0" longitude="0" on-google-map-ready="{{mapReady}}">
</google-map>
</template>
<script>
Polymer('my-map', {
mapReady: function() {
var marker = new google.maps.Marker({
map: this.$.map.map,
position: new google.maps.LatLng(0, 0),
animation: google.maps.Animation.BOUNCE
});
}
});
</script>
</polymer-element>
Add possbility to create a map with mutiple destination.
Ideally the map should support multiple destination my coordinate and by name
I need an autocomplete component so I was thinking about pulling @bamnet's work and add on to it, but I'm curious about your conventions. Do you prefer keeping components in files that reflect Google Maps API namespaces such as google-map.html
and google-map-places.html
? Or is it good practice to separate components into their own files i.e. google-map.html
, google-map-marker.html
, google-places-autocomplete.html
?
I'm not sure what the directory structure setup is supposed to look like for testing.
I currently clone this component to my local machine then run bower install
. However, the test files are referring to files that aren't in bower_components and don't exist within this component's directory (e.g. https://github.com/GoogleWebComponents/google-map/blob/master/test/google-map-basic.html#L7). The html files themselves refer to files that aren't in this component's directory (https://github.com/GoogleWebComponents/google-map/blob/master/google-map.html#L3).
I understand that the ../pathto/file.html
is written that way because it expects to be in the same directory (e.g. /bower_components/).
This makes testing a bit odd and results in a noisy dev console when these files aren't found. What's the strategy supposed to be here?
https://github.com/GoogleWebComponents/google-map/blob/0.4.0/google-map-search.html#L90
I can see this is fixed in master , probably worth a cherry-pick & tag v0.4.1 ?
hi,
im currently having trouble with your data binding syntax with laravel (PHP Framework) blade syntax it both use the '{{ }}' syntax, do you have any alternative to change the syntax?
Thank You,
Steps to reproduce:
google-map
(by template binding).Here is an example.
<!DOCTYPE html>
<html>
<head>
<link href="bower_components/google-map/google-map.html" rel="import">
<title></title>
</head>
<body>
<polymer-element name="my-element">
<template>
<style>
:host {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
}
google-map {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
position: absolute;
}
</style>
<google-map fitToMarkers>
<template repeat="{{marker in markers}}">
<google-map-marker latitude="{{marker.latitude}}" longitude="{{marker.longitude}}" title="{{marker.name}}"></google-map-marker>
</template>
</google-map>
</template>
<script>
Polymer({
ready: function () {
this.startUpdateMarkers();
},
randomMarkers: function () {
this.markers = [];
count = Math.random() * 10;
for (i = 0; i < count; i ++) {
this.markers[i] = {
longitude: Math.random() *50,
latitude: Math.random() * 50,
name: 'marker ' + i
}
}
},
startUpdateMarkers: function () {
this.randomMarkers();
this.async(function() {
this.startUpdateMarkers();
}, null, 1500);
}
});
</script>
</polymer-element>
<my-element></my-element>
</body>
</html>
This issue is similar to #44 but this time the component doesn't listen for zoom_changed
event.
I'll work on this and will submit a PR.
I'm fairly new to Polymer and there may be a design principle I'm unaware of, but...
I'm not entirely sure why google-map doesn't have its display property set to bock by default. Without applying this style I was unable to get the component to show up at all (even when explicitly setting the control's width and height to 300px), and it seems odd that the style wouldn't simply be specified within the component's CSS.
Hey guys,
I was wondering why this element isn't under GoogleWebComponents
and is marked as private?
https://github.com/PolymerLabs/google-map/blob/master/bower.json#L3
Polymer/google-apis#master
should be PolymerLabs/google-apis#master
There should be some way to create a google.maps.InfoWindow
associated with a marker.
Options:
info
propertyI would love to see full polyline support with this component.
It would be nice to have a place autocomplete component which can be styled by a user or a service which can be bound to an input textfield.
This is pretty weird: when I drag, the screen shakes wildly, because the viewport is moved by a bit, then reset back. If it really IS supposed to resist the drag, then I'd recommend to include in the implementation setOptions({ draggable: false })
to prevent the shaking. I'd also suggest the addition of a fitToMarkers method that resets the view once, and can be called again at a later time to reset the view after the user has navigated away.
In many situations knowing your current location on the map (aka "My Location") is essential in making sense/use of the map being shown but the current implementation of the google-map web component is missing:
To pass through to the google-maps-api
First of all let me say I absolutely love the concept of web components. I think it's the future of web development and I am really excited about it.
Now to the issue ... I have problems with google-map inside core-animated-pages. I am able to fix all of them, just wanted to post here for others and maybe to find a better solution.
Also see this issue
This is my main component using core-scaffold with core-animated-pages:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../cb-home/cb-home.html">
<link rel="import" href="../cb-locations/cb-locations.html">
<link rel="import" href="../cb-paper/cb-paper.html">
<link rel="import" href="../cb-map/cb-map.html">
<polymer-element name="cb-app" attributes="route locations">
<template>
<link rel="stylesheet" href="cb-app.css">
<flatiron-director route="{{route}}" autoHash></flatiron-director>
<core-scaffold id="scaffold">
<core-header-panel navigation mode="seamed" flex>
<core-toolbar>
<span>Climbuddy</span>
</core-toolbar>
<core-menu selected="{{route}}" valueattr="hash">
<paper-item hash="home" noink><a href="/#home">Home</a></paper-item>
<paper-item hash="map" noink><a href="/#map">Map</a></paper-item>
<paper-item hash="locations" noink><a href="/#locations">Locations</a></paper-item>
</core-menu>
</core-header-panel>
<core-toolbar tool flex>
<span flex>Page</span>
<core-icon-button icon="perm-identity"></core-icon-button>
</core-toolbar>
<core-animated-pages id="pages" selected="{{route}}" valueattr="id" transitions="slide-from-right" layout fit>
<!-- home -->
<cb-home id="home"></cb-home>
<!-- map -->
<cb-map id="map" locations="{{locations}}" fit></cb-map>
<!-- locations -->
<cb-locations id="locations" locations="{{locations}}"></cb-locations>
<!-- location -->
<cb-location id="location"></cb-location>
</core-animated-pages>
</core-scaffold>
</template>
<script>
(function () {
Polymer('cb-app', {
ready: function() {
var pages = this.$.pages;
var map = this.$.map;
if (pages.selected !== 'map') {
// fix map size because of core-animated-pages on first
pages.addEventListener('core-animated-pages-transition-prepare', function() {
setTimeout(function() {
map.fixMap();
},0);
});
}
}
});
})();
</script>
</polymer-element>
Where looks like
<polymer-element name="cb-map" attributes="locations">
<template>
<google-map fit id="map" zoom="4" latitude="45.63" longitude="16.16">
<template repeat="{{loc in locations}}">
<google-map-marker title="{{loc.name}}" latitude="{{loc.lat}}" longitude="{{loc.lng}}" icon="/images/markers/marker.png"></google-map-marker>
</template>
</google-map>
</template>
<script>
(function () {
Polymer('cb-map', {
// just a helper function
fixMap: function() {
var map = this.$.map; // google map web component
var gmap = map.map; // google.maps.Map instance
var lat = gmap.getCenter().lat();
var lng = gmap.getCenter().lng();
// at this point, everything is ok
// before resize latitude 45.63 longitude 16.159999999999968
console.log('before resize', 'latitude', lat, 'longitude', lng);
// fix size for core-animated-pages
map.resize();
// at this point latitude and longitude ar wrong
// after resize latitude 19.16672805677583 longitude 42.878749999999954
console.log('after resize', 'latitude', gmap.getCenter().lat(), 'longitude', gmap.getCenter().lng());
// fix center because of resize
map.latitude = lat;
map.longitude = lng;
setTimeout(function(){
// after fixing center is ok again of course
// after fix latitude 45.62999999999999 longitude 16.15999999999995
console.log('after fix', 'latitude', gmap.getCenter().lat(), 'longitude', gmap.getCenter().lng());
},10);
}
});
})();
</script>
</polymer-element>
As you can see, map center is off after map.resize(), so I have to manually reset it, which causes a slight flicker in animation. I'm not sure if this is a bug or I'm doing something wrong. It appears as if latitude and longitude values are switched after resize.
Anyway, keep up the good work ;)
For convenience-sake, there should be an on-click attribute on the map marker components.
<google-map-marker on-click="{{onClickMarker}}" latitude="37.779" longitude="-122.3892" title="Go Giants!"></google-map-marker>
I keep getting this on trying to load.
Imported resource from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.
It would be useful to define markers within the google-map element, like
<google-map latitude="-33" longitude="151" zoom="4">
<marker latitude="-25.363882" longitude="131.044922" title="Hello World!" />
</google-map>
Specifying more than one library in the libraries parameter of the google-map component results in receiving a 400 error from the Maps API service. Using the component:
<google-map latitude="40.7310666" longitude="-73.9909639" zoom="13" id="google_map" libraries="visualization,places" apiKey="xxx"> </google-map>
I received
Failed to load resource: the server responded with a status of 400 (Bad Request) https://maps.googleapis.com/maps/api/js?callback=https___maps_googleapis_co…libraries=visualization,places&key=xxx
Plugging in the full URL (below) into a browser returns:
https://maps.googleapis.com/maps/api/js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_visualization,places_key_xxx_api_loaded&v=3.exp&libraries=visualization,places&key=xxx
The Google Maps API server rejected your request. The 'callback' parameter specified in the request is invalid.
I think the "%%callback%%" macro in google-maps-api doesn't handle commas or spaces well. I tried different services -- even invalid ones -- and it behaved as expected. However, if I list more than one with a space or a comma, it fails.
I have a google-map as a position: fixed
"background" for a list of cards. I want to keep user interactions from map, but I need the scroll wheel behaviour to scroll the list.
Is there any way to do that? I tried to set zoomable="false"
on google-map element. It works with position: absolute
, but as fixed it only prevents the zoom, I can't scroll the cards.
It's ignored--so it's won't break anything that continues to include it--but it now isn't required and does nothing, so sensor
can be removed from all of the current Maps elements.
https://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog (see 26 May 2014 entry)
I just played around with the component and ran into an issue.
I added this code into my HTML:
<google-map latitude="47.0765384" longitude="15.446556600000001">
<google-map-marker latitude="47.0765384" longitude="15.446556600000001">
<img src="location_icon.png">
</google-map-marker>
</google-map>
I can see the marker but whenever I click on it nothing happens. I also tried adding the marker dynamically using JS but get the same behavior.
The console shows no errors.
I've passed object literals to the element but it raises an error. I've tried to create ltlng objects from within my element but google isn't available and if I include the api in my document root I get the multiple api error.
Do you have an example of passing something other than a string?
I have used the google maps element something like this :
<google-map id="myMap" zoom="17" libraries="places,visualization" disableDefaultUI fitToMarkers>
</google-map>
and i followed the tutorial from here : https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap
Without heatmap it works fine i.e., normal plotting of markers works fine.
Can you guys please fix this asap. We have a demo to one of our customers tomorrow evening and we need to heat maps for one of the use case. Atleast some workaround or temporary fix would be great.
Thanks a lot,
Vinay
itself does not work. it works fine when adding the fit attribute just like . it think it may be set by default?!
The following code results in a map that loads with the default location showing instead of the the map being centered on the marker (marker is visible if you zoom out)
<google-map showCenterMarker>
<google-map-marker longitude="-80.1417572" latitude="25.985486"></google-map-marker>
</google-map>
Given the following example:
<google-map fitToMarkers>
<google-map-marker latitude="{{ selectedAddress.coordinates.latitude }}"
longitude="{{ selectedAddress.coordinates.longitude }}">
</google-map-marker>
</google-map>
where selectedAddress.coordinates
is {latitude: 20, longitude: 20}
breaks with an error in Google Maps API because this.latitude
and this.longitude
in updatePosition
are strings, not numbers. It'd be very useful if the assumption that these values are numbers were not there.
This seems to happen because setAttribute
converts its second argument to a string, and Polymer's misfeature of guessing the expected type and automatically converting does not work when an attribute is set with setAttribute
.
What is the best way to handle google-map-marker click (or any other) event?
I can customize google-map-marker.html easily.
mapReady: function() {
this.marker = new google.maps.Marker(...);
this.contentChanged();
setupDragHandler_.bind(this)();
setupClickHandler_.bind(this)();
},
function setupClickHandler_() {
this.clickHandler_ = google.maps.event.addListener(this.marker, 'click', function() {
this.fire('marker-click');
}.bind(this));
}
Then I can do
<google-map-marker
on-marker-click="{{markerClick}}"
title="{{loc.name}}"
latitude="{{loc.lat}}"
longitude="{{loc.lng}}"
icon="/images/markers/{{loc.types[0].type}}.png">
</google-map-marker>
But of course customizing google-map-marker.html is not an option. If I try to extend the marker I have a problem with google-map template having the wrong content selector.
<content id="markers" select="google-map-marker"></content>
Please add/show a way to handle click and other events.
EDIT: so I ended up copy-pasting and editing both google-map and google-map-marker because I need some custom attributes on the marker and it was just easier than trying to extend them. It's ok for now, but please we need a way to easily extend map and markers.
Thanks and keep up the good work
The 0.3.1
tag of google-map
seems to have accidentally depended on google-apis#master
instead of 0.3.2
. I have to add a bower resolution for this, but I'm worried that I'll forget about the resolution and it will introduce bit rot. If it's possible to cut a new tag with the current dependency that would be awesome.
Surprised there is no support for passing in a string based address to be geocoded. Is there a reason for that? It isn't terribly difficult to find the long/lat of an address, but it would be nice if the component supported it out of the box.
Is the link to missing?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.