sandydoo / ember-google-maps Goto Github PK
View Code? Open in Web Editor NEWA friendly Ember addon for working with Google Maps.
Home Page: https://ember-google-maps.sandydoo.me
License: MIT License
A friendly Ember addon for working with Google Maps.
Home Page: https://ember-google-maps.sandydoo.me
License: MIT License
Thanks so much for this addon - I'm in the process of migrating from ember-g-map
and it's been relatively painless.
For the overlay component, the innerContainerStyle
is set up nicely for tooltip type content whose anchor is at the bottom middle of the content. However, if you have content that is meant to be centered on the lat/lng (e.g. a user location circle), you need to override innerContainerStyle
to htmlSafe('transform: translateX(-50%) translateY(-50%);')
. I would suggest including a note to this end in the docs.
I'm not sure if your docs site is a separate and available repo or included in the main ember-google-maps
repo; if so, please feel free to point me to it and I'll submit a PR.
Great add on. One question, does this have 'Distance To' functionality built in?
I'd like to measure the distance to one point from another. Not sure if I missed it on the docs or not, but a point in the right direction would be helpful. Here's some info..
https://developers.google.com/maps/documentation/distance-matrix/intro
This codepen is basically doing what I want..
https://codepen.io/youfoundron/pen/GIlvp
thank you!!
It would be nice if map components had a zIndex attribute to make it possible to influence the display order. In our app we have a focus state for certain components, but they aren't always displayed on top.
Any suggestions on how you would implement something like that?
Would be cool to silence the build warning from index.js, when using the runtime configuration (buildGoogleMapsUrl
).
Hi Dear
I am David, hope You can help me. I have a "Google Maps JavaScript API warning: RetiredVersion" warning and as said in documentation I changed version: '3.34' to version: '3.35', and update version "ember-google-maps": "^2.1.0". Now I have same warning too, besides that map not open first time before reinit.
Thanks for understanding.
Is there a way to add the Circle or Polygono Search where you draw on the map and it search based on your selection?
Hi, I'm an ember js developer from South Africa and I really like this addon but it doesn't seem to show the map as soon as I change the region to ZA. Is there a way for it work with ZA or is it not supported?
Has anyone used the autocomplete component as a standard autocomplete (with dropdown and no map?). There's not much in the docs about how to integrate the autocomplete, so looking for a few examples. Thanks!
Hi,
O am trying to restrict autocomplete to list only allowed types eg:- geocode, addresses etc. How can I pass these values- https://developers.google.com/places/supported_types
Thank you in advance,
Sujata Yellaepeddi
Is it intentional that onComponentsLoad
is invoked two times? This was not documented nor expected and feels like a bug to me. In _initMap
in g-map.js
, the _waitForComponents
function invokes onComponentsLoad
and the afterRender
function which invokes _waitForComponents
invokes it as well on resolution of the _waitForComponents
promise:
scheduleOnce('afterRender', this, () => {
if (this.isDestroying || this.isDestroyed) { return; }
this._waitForComponents()
.then(() => {
this._componentsInitialized = true;
tryInvoke(this, 'onComponentsLoad', [this.publicAPI]);
});
});
_waitForComponents() {
let componentsAreInitialized =
Object.keys(this.components)
.map((name) => this.components[name])
.reduce((array, componentGroup) => array.concat(componentGroup), [])
.map((components) => get(components, 'isInitialized.promise'));
return all(componentsAreInitialized)
.then(() => {
this._componentsInitialized = true;
tryInvoke(this, 'onComponentsLoad', [this.publicAPI]);
});
},
This initially lead to bugs for me and I'm having to ensure I call my handler only once
Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.
I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.
I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.
I've searched the relevant section of the Google Maps API reference.
I've searched the closed issues for similar problems.
It looks like the in-repo-pin-addon
in-repo-addon gets linted when running the tests of the consuming app.
We recently enabled the no-implicit-this
template lint rule, and since the lint.hbs component template doesn't comply it fails our pipeline.
no-implicit-this
rule and run the test suiteThe in-repo-pin-addon
addon does not get linted by the consuming apps linting config.
We tried blacklisting the in-repo-pin-addon
addon in our app, but I guess that doesn't work. We also tried updating the linting config to skip the addon, but we can't get that to work either.
Addon configuration:
Addon version: v2.1.1
Addon config from environment.js
(do not post your API key):
'ember-google-maps': {
key: GOOGLE_API_KEY,
language: GOOGLE_MAPS_LANGUAGE,
region: GOOGLE_MAPS_REGION
}
Hi! This map addons looks amazing and I cannot wait to start using it instead of ember-g-map
. But some issue that we faced seem to be an issue with this addon as well and I wonder if you are aware of it and maybe have plans on fixing it.
I'm talking about memory leaks which Google Maps produce because there is no proper cleaning after we remove a map from page.
Here is an issue reported to google years ago https://issuetracker.google.com/issues/35821412
And it has status Won't fix
. The only answer on how to solve that in that thread is recommendation to reuse (map canvas?) somehow.
I tried to check examples on your website which seem to be fully built in Ember with the use of this amazing addon. If I navigate between Directions and Controls examples multiple times I can see that memory is leaking.
I wonder how that would be if we would use multiple long-distance directions. This is what seem to make maps to leak heavily in our case because of huge arrays of coordinates from DirectionService.
So the questions are:
Firstly, thank you so much for building such a lovely api wrapper for google maps, the move from ember-cli-g-maps
has removed so much code!!
Apologies if I'm missing something basic but I can't seem to get my infowindows to open. I know that the open attribute is being set correctly but for some reason the windows themselves aren't showing.
// controller.js
actions: {
onMapLoad(publicApi) {
set(this, 'gmapApi', publicApi);
// this is then used to manually set the bounds of the map once the site
// markers are loaded which is why I don't set a lat and lng for the map initially
}
}
I've tried following you instructions here for creating one infowindow and changing the target but I get the same result.
Addon configuration:
Addon version: 2.1.1
Addon config from environment.js
(do not post your API key):
ENV['ember-google-maps'] = {
key: process.env.GOOGLE_MAPS_API_KEY, // Using .env files in this example
language: 'en',
region: 'GB',
protocol: 'https',
version: '3.35',
libraries: ['drawing'], // Optional libraries
// client: undefined,
// channel: undefined,
// baseUrl: '//maps.googleapis.com/maps/api/js'
};
ember-cli-build.js
: 'ember-google-maps': {
only: ['marker', 'info-window']
}
Desktop:
OS: osx 10.14.3
Browser: chrome
Version: 73.0.3683.86
Documentation propose using custom overlays in place of markers whenever more advances formatting is required. Google provides a few nice solution that are handy to use with map that is based on many markers, ie. https://developers.google.com/maps/documentation/javascript/marker-clustering. Is there anything similar that can be used as replacement for overlays?
While other components expose their mapComponent
as the target
of the object passed into event handlers, overlay is the exception, because the target
is the HTMLElement.
There seems to be no public way to get access to the OverlayView
class instance for g-map/overlay
components.
WARN: DEPRECATION: The <dummy@component:g-map::ember214>#options computed property was just overriden. This removes the computed property and replaces it with a plain value, and has been deprecated. If you want this behavior, consider defining a setter which does it manually. [deprecation id: computed-property.override] See https://emberjs.com/deprecations/v3.x#toc_computed-property-override for more details.
Should be fixed by #58.
Using polylines in Ember 3.6 creates a deprecation warning when destroying the component. This is caused by prototype function listener specified in g-map/polyline.js R15: _watchedOptions.
Add a polyline
{{g.polyline path=map.route geodesic=true strokeColor="#58a5d3" strokeOpacity=0.7 strokeWeight=2}}
Navigate to a different page of remove the block containing the polyline.
Console:
DEPRECATION: You attempted to remove a function listener which did not exist on the instance, which means it was an inherited prototype listener, or you attempted to remove it before it was added. Prototype function listeners have been deprecated, and attempting to remove a non-existent function listener this will error in the future. [deprecation id: events.inherited-function-listeners] See https://emberjs.com/deprecations/v3.x#toc_events-inherited-function-listeners for more details.
Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.
I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.
I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.
I've searched the relevant section of the Google Maps API reference.
I've searched the closed issues for similar problems.
This page https://ember-google-maps.sandydoo.me/docs/map reads:
The g-map component accepts all of the GoogleReference::MapOptions options you would pass to a Google Map instance. These are automatically watched for changes.
And there is an example with minZoom
. But this doesn't seem to work, the map pugin seems to respect minZoom
and maxZoom
only when passed in options object.
Does not work:
{{#g-map
minZoom=minZoom
maxZoom=maxZoom
}}
Works:
options = {
minZoom: minZoom,
maxZoom: maxZoom
}
{{#g-map
options=options
}}
Addon configuration:
Any plans for promoting a specific plugin pattern for addons that want to provide functionality that isn't in this addon? Like https://github.com/knownasilya/google-maps-markup or an addon that works with google.maps.Data
as some examples.
The google maps Data layer is useful for rendering arbitrary geospatial data onto map in the form of GeoJSON and polygons. It'd be great if `ember-google-maps' provided a components for adding and styling GeoJSON data and polygons.
https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data
Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.
I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.
I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.
I've searched the relevant section of the Google Maps API reference.
I've searched the closed issues for similar problems.
I've been building a complex map over the last few months for a client and one of the latest feature requests was that we be able to print it in-browser, allowing folks to specify zoom and positioning for the map. When printed in Webkit-based browsers, we were seeing map tiles tear as outlined in this Chromium bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=426294
The official Google Maps line on printing is that printing isn't supported and the common recommendation is that the Google Static Maps API be used instead. But in my particular use case, there is no way we'll fit inside the size constraints of the Google Static Maps API and there is enough state in the browser that we track that doing printing on the backend could be a royal pain.
Per the bug report above, it looks to be an issue with Google Maps / Webkit browsers and there is also a CSS fixed suggested: https://bugs.chromium.org/p/chromium/issues/detail?id=426294#c13
That CSS tweak ended up fixing my issues (so far, π€). So my question is, would we want to consider adding that CSS to this addon to keep other folks from getting snagged in the future? I can see going either way (Google Maps might incorporate the fix themselves or some variant down the road, which would mean we'd be shipping unneeded CSS in this addon for a long time). But it caused enough headaches on this end that I thought I'd bring the idea up ...
Thoughts?
It looks like the ember concurrency is hard pinned to a specific version. Our dependency lint is failing at the moment, since our app and some addons installed patch versions which aren't compatible with that pinned version.
Is there a reason why the version is pinned, instead of using a range?
Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.
I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.
I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.
I've searched the relevant section of the Google Maps API reference.
I've searched the closed issues for similar problems.
I do not have lat or long, does this addon get that data or would I need another addon to get it?
Hey @sandydoo, I've recently started working for another client were we're likely to use your addon there too. That client uses Typescript fairly heavily and might be interested in helping add Typescript annotations to your addon if you're interested. There is a quest issue to add TypeScript support throughout the Ember.js ecosystem and according to them, it will benefit everyone who uses this addon, not just TypeScript users! (See this discussion for more details
Would you be interested in either converting the addon to use TypeScript itself, or in adding type definitions? Iβd love to help out if so ...
Thanks!
I am trying to use the autocomplete component and even though I am passing region as 'US' it still returns results from all over the world. As I look further it seems Autocomplete needs to be restricted using componentRestrictions.
eg:-
var options = {
types: ['(places)'],
componentRestrictions: {country: 'US'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
Please can you check this out and fix it for us
So i am working with some large data set which has boundary data in the component. I would like to create a boundary around this area? Is that what a polyline does?
Just wanted to log an issue for any near-term future people trying to use google maps in a ios webview. I ran into an issue where the view would go "brown" or blank. I ended up adding the following css rule:
.ember-google-map {
-webkit-transform: rotate(0deg);
}
This solution was mentioned in this issue:
ionic-team/ionic-native-google-maps#213 (comment)
π»
It seems like g-map
and g.marker
both do not react to changes of lat
and lng
. I guess this might not be wanted in some scenarios, but sometimes it is useful. I guess we could have an observer like this?
setPosition(position) {
return this.mapComponent && this.mapComponent.setPosition(position);
},
observePosition: observer('position', 'shouldObservePosition' function() {
if (this.get('shouldObservePosition')) {
this.setPosition(this.get('position'));
}
Do you have any idea for some workaround? I tried to extend a marker component, but I am not really sure how to extend a contextual component without losing, well, context.
Usecase:
Hi, I am starting to use this library, however there's a mismatch in the documentation that make some noise. It's about the compatibility as I explain next:
In ember-google-maps.sandydoo.me I don't see any section about compatility
In the readme in github the compatibility is for Ember.js v2.18 or above
In Emberobserver.com the comatibility ask for Ember.js v3.4 or above
So, which one is correct?
Hey,
I'm using the infowindow attached to around 600 markers and the rendering is horribly slow, when I trie to hide and show one IW.
To boost the rendering, I've created only one IW with the lat, lng of an active item. But now the IW is not properly positioned, like in the example:
It should float above the marker. How can I adjust the position of it? I found that there is a property pixelOffset for that.
Probably this is not a bug, more like a question.
I have a map with default lat/lng set while rendering. Now I pan and zoom in and then click on the map. This triggers the click event and I get the new place lat/lng. However map zooms back to initial zoom position displaying the marker at the new place.
I want to retain the zoom level whatever user have set before clicking. @sandydoo Could you please help me with that ?
At https://ember-google-maps.sandydoo.me/docs/controls the g.control
example has the position property set to position="TOP CENTER"
when it should be position="TOP_CENTER"
. I didn't see a gh-pages branch or anything so reporting this here. Thanks!
I have a need of using the following utility library which is actually a more customizable version of google maps infowindows: infobox.js source.
I tried adding it the usual way through importing it in the ember-cli-build
from vendor directory and then adding a new component aptly called info-box
. I removed the template file so it uses the info-window
template instead and this is what I put in the javascript file:
import InfoBox from 'info-box';
import GoogleMapInfowindow from 'ember-google-map/components/g-map/info-window';
import {
set
} from '@ember/object';
export default GoogleMapInfowindow.extend({
_type: 'infoBox',
_addComponent() {
this._prepareContent();
let options = this._getOptions();
set(this, 'mapComponent', new InfoBox(options));
}
});
The above way of extending and overriding the google info-window
component worked with my previous ember-g-map
addon because infobox.js
is meant to be an exact copy of google infowindow except with the added features and customizability.
On running my application after the above I understandably get the google is not defined
error.
I know I can use your custom overlays contextual component but it lacks some features which are available in infobox.js
which actually extends google.maps.OverlayView
class. Some of the features missing from your custom overlays
are pixelOffset
and alignBottom
which are both options that can be passed to a new instance infobox
. Both of these allow me to offset/reposition the infobox
popup relative to the pin point location.
My application was already using infobox.js
extensively so it would be nice to port this somehow to the ember-google-maps contextual components.
Any advice on how to achieve this even minimally?
The Google Maps URL is created at build time. It would be useful to be able to set some of the options, such as language or region, at runtime. E.g. determine the language or region from a user profile.
Hey @sandydoo, I'm back again π I've been building a geoJson setup for a client using an addon that hooks into the addon system. Works great for almost everything I need.
But I'm hitting a snag around willDestroyElement
and removing items from the main map using an addon and public api. Specifically, in a scenario where I do this:
{{#g-map ... as |g|}}
{{#each plots as |plot|}}
{{g.data feature=plot.feature}}
{{/each}}
{{/g-map}}
Things work great on setup (there's a bunch of hand-waving here around plot.feature
, but things are working there). Where I'm running into issues is if I remove a plot from the plots
array and want it removed from the map.
In my g.data
component, I've got code much akin to this:
export default MapComponent.extend({
...
_type: 'data',
_feature: undefined,
_addComponent() {
const map = this.get('publicAPI.map');
this.set('_feature', map.data.add(this.get('feature'));
},
...
willDestroyElement() {
let map = this.get('map');
// would like to move to this usage. But requires changes to the proxy class in order to support it
// const map = this.get('publicAPI.map');
map.data.remove(this.get('_feature'));
this._super(...arguments);
}
});
This all works (and works well). But I'd like to be sticking to the straight and narrow and uses a call to this.get('publicAPI.map')
instead as I unload a given feature from the map. However ...
What I'm hitting is that the registration of publicAPI
that occurs in the MapComponent#init
hook leads to the publicAPI instance.on('willDestroyElement')
event handler being called prior to the willDestroyElement
method I'm setting up myself.
I've temporarily wired around this by using the internal this.get('map')
call, but would like to stick to using what you've clearly asked me to π I'll push up a PR with a suggested change, but would love to hear your thoughts here ...
Please read the documentation before opening an issue. Once you understand how this addon works, you will find that most problems can be solved by consulting the Google Maps API reference.
I've read the relevant documentation for this addon on ember-google-maps.sandydoo.me.
I understand how to set options on the components in this addon. Options are not hardcoded. Arguments passed to a component are used to set the options on the map component.
I've searched the relevant section of the Google Maps API reference.
I've searched the closed issues for similar problems.
onDirectionsChanged
causes a google map error: Cannot read property 'addEventListener' of undefined
Steps to reproduce the behaviour, or a link to a reproduction repo or twiddle.
{{#g-map
lat="51.508530"
lng="-0.076132"
zoom=12
onLoad=(action "mapLoaded")
as |g|}}
{{#g.directions
origin="Covent Garden"
destination="Clerkenwell"
travelMode="WALKING"
onDirectionsChange=(action "onDirectionsChange")
as |d|}}
{{/g.directions}}
{{/g-map}}
Action executes
Investigated the error, looks like when trying to add eventListener in register-events
mixin, _eventTarget
is undefined for that component
Addon configuration:
environment.js
(do not post your API key):{
language: 'en',
region: 'US',
protocol: 'https',
version: 'quarterly',
libraries: ['geometry', 'places'],
}
Desktop:
Chrome 75 in windows
I'm having an infoWindow issue: the isOpen option doesn't seem to be working. I've verified that the toggle action is properly setting true false, but I can't get the infoWindow to respond
{{#g-map lat="39.0986106" lng="-98.6166598" zoom=4 as |g|}}
{{#each this.model as |provider|}}
{{#g.marker lat=provider.latlon.[0] lng=provider.latlon.[1] onClick=(action "toggle") as |m|}}
{{#m.infoWindow isOpen=provider.markerOpen }}
{{provider.name}}
{{/m.infoWindow}}
{{/g.marker}}
{{/each}}
{{/g-map}}
I'm having difficulty styling my map (similar to how the example rentals project is styled). I'm having trouble finding any specific sections of the docs that deal with styling. Could you point me in the right direction? Happy to contribute to the docs once sorted!
Looks like the -private-api/detect-render component is excluded if you use a whitelist but it's necessary for the overlay component.
Have seen the example of being able to call the canvas component to be able to place other components/mark up outside of the map canvas, but what if you also want other components within the canvas at the same time?
We're defining maps using AngleBracket notation. Since the 2.2.1 release classes set through the class
attribute aren't passed to the canvas div anymore:
Passing them using @classNames="h-full w-full"
works though.
I know this functionality wasn't documented before, but it would be nice if attributes could be splat on the div somehow.
Thanks for all the work on this addon. It's fantastic.
As you mention in the docs, getting the bits out of the directions object for a route can be a pain. I'm sure you're aware of the method setPanel() on the DirectionsRenderer
that will insert formatted turn by turn instructions into the element passed to the method. Would you have any interest in a PR to add an option to pass an element's id to the route component? I took a first pass. I'm happy to make changes to match style preferences, add tests, update the docs, and whatnot.
Again, thanks for all hard work here.
First off, I want to say that this library is a really elegant way to interface with google maps. I love the declarative style. But I'm experiencing serious performance degradation when trying to scale to a growing number of markers which has caused me to temporarily role my own solution. I'd like to discuss what you would be open to in this library when scale becomes an issue (or how we can improve ember-google-maps to better support lots of markers).
In my own application, I've gone from needing to show ~50-100 pins to 750 pins - 1000 pins overnight. When entering my route with the map, the load time takes anywhere from 3-6 seconds on my macbook pro in chrome and as much as 20 seconds on some older android devices. I've profiled the slow loading and it's not google, it's the amount of time spent in the rendering engine for ember that's bottlenecking. Furthermore, my own handrolled solution renders 1k instantly.
Consider this markup:
All of that is evaluated at render time despite no marker.infoWindow being shown at render time. There is a non-negligible overhead to creating a component per marker. Even if I clustered the markers via the standard google clustering lib, to leverage such a component based approach as done here means I'm still stuck in the render bottleneck of glimmer trying to work through a lot of components that arent even rendering anything yet (or ever).
What i've implemented in my own project is a markers-layer that receives all locations for me to render with an inner component for the marker window that's used for a yielded current location.
After following the readme and guide to get started, I am unable to render the most basic component. It seems as if the Google objects are not loaded at the point it's invoked.
In looking at the Google Maps API docs, I see that https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
includes invoking a callback. Is this handled internally?
I've pretty much taken the exact steps in the Getting Started guide and can't seem to get past this.
Any tips?
Regarding emberjs/ember.js#17397
didUpdateAttrs is called if either of the following circumstances:
- When passed in arguments have changed
- Any other time
- Any other time
... applies to a scenario we currently have.
We experience issues where the didUpdateAttrs
hook in g-map
is called very often, even though no params have been changed, but according to the linked issue this is expected behavior. The side effect we experience is that event handlers, like onZoomchanged
are called very often, causing itself a change of the params and so on...
Would it be a good idea to check for a change in the params, before continuing to update the Google Map?
btw. great work - love the addon π !
It would be great if ember-google-maps
offered a utility for automatically managing the zoom and center of the map based on the components placed the map.
ember-g-map
offers this feature with it's markersFitMode
property on the g-map
component. The markersFitMode parameter can be used instead of, or as an override to, the explicit lat/lng/zoom properties. With markersFitMode='init'
ember-g-map will automatically set the map bounds to contain all of the markers shown on the map, and when markersFitMode='live'
it will also update the map bounds as markers are added or removed from the map.
I would suggest a few improvements over the ember-g-maps
implementation:
Automatic bounds management should be based on markers, circles, infowindows, overlays and polylines (not just markers). This should also be configurable, for example if you need your map to auto-bound to circles but not markers. Additionally, we could add an API to make this opt-in on the component level so that any individual map components can be flagged for inclusion in the map's bounds.
The ember-g-maps
implementation doesn't keep track of whether a user has manually altered the zoom or pan of the map, so any change to the markers will reset the map pan/zoom. This can be jarring in situations where a user has zoomed or panned the map, only to have their work blown away by a data change they may not have triggered. There should be a configuration to allow the map to disable the auto-bounding behavior if a user has manually adjusted the map's pan or zoom. Additionally, a method could be exposed allowing map.fitBounds
to be manually triggered.
An option should be provided to chose whether fitBounds or panToBounds is used under the hood when the map bounds change as a result of auto bounds management.
The overall API for enabling and configuring this behavior needs some thought. Should it be another contextual component ({{g.bounds-manager mode='init' pan=true}}
) or should this be a parameter(s) on the {{g-map}}
itself?
As part of this feature work, it may be worth considering adding the ability to pass the {{g-map}}
a bounds parameter instead of lat/lng/zoom.
If there is agreement that this is a desirable feature to add to the addon, and an API is agreed on, I would be happy to work on implementation.
Alternatives
Most of these features could probably be implemented outside of the ember-google-maps
, either as a "plugin" addon or a custom in-app component designed to be used inside a {{#g-map}}
block. Some of the features I've suggested can't be done without changing ember-google-maps
.
This addon throws the following error on the chrome browser console when installed and run on the latest ember js release version 3.6:
Uncaught RangeError: Maximum call stack size exceeded
at Array.CPGETTER_FUNCTION [as []] (metal.js:751)
at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)
at $b (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:71)
at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)
at $b (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:71)
at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)
at $b (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:71)
at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)
at $b (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:71)
at Object._.ac (js?libraries=geometry%2Cplaces&language=en&key=AIzaSyAS4_1rvd0or02Q4K3fQx24YhuC6jxxGF0&callback=initGoogleMap:70)
Just create a brand new Ember JS version 3.6 application and install the addon. Then simply put a simple map on the application template such as {{g-map lat="-1.2325835" lng="36.8766528" zoom=17}}
and run the application in a chrome browser.
Then:
Uncaught RangeError: Maximum call stack size exceeded
Do not expect to see any errors in the console.
I ran 'npm outdated' to see which dependencies were outdated and then went ahead to update them to the latest versions but this did not fix the issue.
Addon configuration:
Addon version: 2.1.0
Addon config from environment.js
(do not post your API key):
let ENV = {
'ember-google-maps': {
language: 'en',
libraries: ['geometry', 'places'],
key: '<valid key>'
}
};
Desktop:
OS: [e.g. iOS] Mac Os El-capitan
Browser : Chrome
Version : 71.0.3578.98
Great work on this Addon!
You may know me as the reluctant author of ember-cli-g-maps. I just wanted to let you know I've just added a deprecation notice to my addon, which recommends usage of this project instead. While you may wish to keep the feature comparison table of ember-cli-g-maps, it might also be unnecessary to invite the comparison at this point. Anyway this is more of an FYI, obviously it's your call.
so i m using ember version 3.0.0, so i have used this addon, the markers, overlay etc works fine,
but only issue what i m facing now is when i using this code
{{#g-map lat="51.507568" lng="-0.127762"
zoom=12
styles=primaryMapStyle as |g|}}
{{!-- A manually positioned info window with basic text --}}
{{g.infoWindow lat=london.lat lng=london.lng
isOpen=mapTooltipOpen
content="Simple text tooltip"}}
{{!--
An info window attached to a marker component.
Notice how it is yielded by the marker itself.
This info window displays the template defined in the block --}}
{{#g.marker lat=london.lat lng=london.lng
onClick=(action (toggle "markerTooltipOpen" this)) as |m|}}
{{#m.infoWindow isOpen=markerTooltipOpen as |i|}}
this is the exact copy from the documentation, when i use i get this error
"Error: Assertion Failed: You cannot create a component from undefined using the {{component}} helperβ΅
this is from my ember-cli-build.js
'ember-google-maps': {
only: ['marker', 'info-window', 'overlay']
// exclude: ['overlay']
},
and this is from my config/enviroment.js
ENV['ember-google-maps'] = {
key: 'fdsfdsfsdfdsfdsfsdfsdf', // Using .env files in this example
language: 'en',
region: 'GB',
protocol: 'https',
version: '3.35',
libraries: ['geometry', 'places'], // Optional libraries
// client: undefined,
// channel: undefined,
// baseUrl: '//maps.googleapis.com/maps/api/js'
}
can u tell me what i am doing wrong or what am i 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.