asennikov / ember-g-map Goto Github PK

I've done some work with the DrawManager with the google maps api directly but think it would be nice to have it emberized within this component. I would potentially like to work on this feature.

While working on #35 I tried to add color option to route component but I couldn't make it work.

I suppose this should be added to rendererOptions for direction renderer in g-map-route component:

let color = this.get('color');
...
polylineOptions: {
  strokeColor: color
}

For some reason it didn't work. Can you please look into it? Thanks!

I'm creating a bit of a make shift search by binding an input field with the address of a {{g-map-address-marker}}

{{paper-input label="Address" value=address}}
{{#g-map markersFitMode='live' zoom=12 as |context|}}
  {{g-map-address-marker context address=address}}
{{/g-map}}

I'm wondering once it is using the right place how do I get the marker details out of the {{g-map-address-marker}} so I can save the lat long on my model and put it in the database?

Hi there,

Just wondering if you would know how to reference the map object from within a controller?

So I can use code like service = new google.maps.places.PlacesService(map); and map.getBounds()

Many Thanks!

Jacob

Also I am not sure if this is the right place to be asking questions but worth a try

There are quite a few Marker properties, events, and methods that are present in the Google Maps API but absent from the g-maps-marker component. Its probably not feasible to fully re-implement the Google Maps API for Markers, but the following list seems like a good place to start, and many of these API features such as drag events and opacity are implemented on other components in this addon, such as the g-maps-polyline component.

• Complex Icon: Currently a url may be provided as a marker's icon property to set a custom marker image, but there is no support for an icon object containing a url, anchor, labelOrigin, origin, scaledSize, or size. Some of these properties may be necessary when using a custom marker image. For instance, a custom marker may need to be anchored to the map in the center of the icon, rather than the default bottom-center. (edit: this is supported but undocumented)
• animation
• anchorPoint
• Opacity
• draggable/dragStart/drag/dragEnd

How do I set the map type to satellite by default? I understand there are custom options you can configure, but I'm not sure about its exact location and syntax.

See question

Hi,
Ember-noob question I was hoping someone could help me out with. I'm having some trouble figuring how to make an extension. To illustrate, I have a rather staightforward use in my template right now. Just an address marker with an info window with some custom content:

{{#g-map markersFitMode="live" as |context|}}
  {{#g-map-address-marker context address=shop1.address as |markerContext|}}
    {{#g-map-infowindow markerContext}}
      <h5>{{shop1.name}}</h5>
      <p>{{shop1.address}}, {{shop1.postalCode}}, {{shop1.city}}</p>
    {{/g-map-infowindow}}
  {{/g-map-address-marker}}

  {!-- and lots more of such g-map-address-markers but with a different model --}

{{/g-map

Basically I have a whole list of shops/studios/etc on the map, and it would be nice to make a component that just takes a model as the source of the information so I don't have to repeat that code and structure it better. So I make my own component mp-map-location with the following code:

import Ember from 'ember';
import GMapAddressMarkerComponent from 'ember-g-map/components/g-map-address-marker';

export default GMapAddressMarkerComponent.extend({
  address: Ember.computed('location.address', 'location.postalCode', 'location.city', function() {
    this.get('location.address') + ', ' + this.get('location.postalCode') + ', ' + this.get('location.city');
  })
});

And the following template

{{#g-map-infowindow markerContext}}
  <h5>{{location.name}}</h5>
  <p>{{address}}</p>
{{/g-map-infowindow}}

Which I was naively hoping would allow me to simply use the following template code:

{{mp-map-location location=shop}}

Now in the original code there's {{#g-map-address-marker context address=general.address as |markerContext|}} which seems to do some essential context binding, and I'm just clueless on how to ensure that still happens with my extension. It's probably also why currently I get the error:

Uncaught Error: Assertion Failed: Must be inside {{#g-map}} or {{#g-map-marker}} components with context set

Sorry if this is not the best place to ask this but since it seemed pretty specific to this addon architecture. Any help on how to get this started is much appreciated!

In one of my apps, I only need the google maps API on a few pages. It would be great to not pay the overhead of loading the API unless (and until) it's really necessary.

This would entail making a few things "promise aware" because there's the possibility that the google.* stuff hasn't been loaded yet, and will need to be fetched "just in time".

Google Maps API error: MissingKeyMapError

my config/environ... looks like this
ENV['g-map'] = {
libraries: ['drawing'],
client: 'gme-...'
}

is it a bug or what?

Cheers

See #80

PR is abandoned and needs to be picked up again.

How can I change the zoom level after programmatically opening an infoWindow on a marker?

Also, how would I go about resetting the zoom level and point?

Also, is this possible from outside the map component?

I'm wanting to set scrollwheel: false but am not seeing any way to set these options. Is this something that is already included that I'm missing, or is it a possibility for an enhancement?
http://stackoverflow.com/a/2330272/2548934

I have installed
ember install ember-g-map

In confg/environment

ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' *.googleapis.com maps.gstatic.com",
'font-src': "'self' fonts.gstatic.com",
'connect-src': "'self' maps.gstatic.com",
'img-src': "'self' *.googleapis.com maps.gstatic.com csi.gstatic.com data:",
'style-src': "'self' 'unsafe-inline' fonts.googleapis.com maps.gstatic.com assets-cdn.github.com"
};

if (environment === 'production') {
ENV.baseURL = '/ember-g-map';
}

i am using

ember-cli version 2.5.1
npm version 3.9.2
OS Linux Fedora 20

The following error is coming

ember.debug.js:16591 Uncaught Error: Assertion Failed: Must be inside {{#g-map}} component with context set

Hi!

I was wondering if something like this is possible:

{{g-map-marker context address="Delft, The Netherlands"}}

That would be a more user friendly way of entering a location in a lot of use cases (anything urban).

Thanks so much for making a working Google Maps component! I first stumbled (probably like most) upon https://github.com/huafu/ember-google-map, but sadly seems to have fallen out of maintenance. Perhaps you guys can work together on maturing your component?

Hi,

Is it possible to make the markers draggable and get the latitude and longitude when dropped?

Because I prefer this addon over ember-cli-g-maps but I really need draggable markers.

Would be ideal to emulate the kind of documentation site provided by addons like ember-leaflet and ember-power-select

https://github.com/miguelcobain/ember-leaflet/tree/master/tests/dummy

Using Ember 2.3.0. The map is showing the right area but I do not see the marker on the map

<div class="col-xs-12 col-md-8">
    {{#g-map lat=40.0403816 lng=-76.2205305 zoom=14 as |context|}}
        {{g-map-marker context lat=37.7933 lng=-122.4167 label="1" title="Locust Grove"}}
    {{/g-map}}
</div>

Now I have not added anything to the environment.js. Not sure if that is the reason

As discussed in #84 there are opportunities to transition to a data-down actions-up architecture from the current architecture that prefers methods as API between components.

Considerations:

• maintain backwards compatibility
• account for syncing of state between g-map components and the underlying google.map object
• account for google.map state management that is shared between g-map components

I noticed this was listed on the README as a desired feature request. It also is something that ember-cli-g-maps was covered for. I would like to potentially work on implementing this.

I'm in a situation where I have a sidebar and the map displayed in the main area. I would like to open a given marker infowindow whenever I click in one of the items in the sidebar. Is it possible to create an action that programmatically opens the infowindow of a given marker context?

I'm trying to use markers with custom colors. To do this in my current app (non-Ember), I'm doing this:

function add_marker(item, point) {
  var pinImage = new google.maps.MarkerImage("https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=|" + item.iconcolor,
      new google.maps.Size(21, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(10, 34));

  var marker = new google.maps.Marker({ map: map, position: point, clickable: true, icon: pinImage });
  return marker;
}

This sets a customer marker color. Any way to pass a pinImage when using g-map-marker ?

First off, thanks so much for your work on this addon, we are loving using it.

I've noticed at most I'm only able to show 3 routes at a time. Is this an imposed limitation? Or am I doing something wrong?

    {{#g-map markersFitMode='live'
             classNames='fde-logistics-planning_gmap'
             options=customOptions as |context|}}
      {{#each driverAllocations as |driverAllocation|}}
          {{g-map-address-route context
                                travelMode='driving'
                                strokeColor=driverAllocation.color
                                strokeWeight=(ternary (eq order selectedOrder) '5' '3')

                                originAddress=order.restaurantLocation.gmapsAddress
                                destinationAddress=order.clientLocation.gmapsAddress
          }}
      {{/each}}
    {{/g-map}}

We've got a paid gmaps key, is it perhaps a question of rate limiting?

Hello guys, I am trying to make my google map responsive, say, the map fits my div when I resize. Here is what I did:

.flex-container{
    display: flex;
    flex-direction:column;
    height:100%;
}
.g-map-canvas {
    width:100%;
    height: 100%;
}
<div class="flex-container">
    <div style="flex:1" >
      {{#g-map  markersFitMode="init" as |context|}}
      {{/g-map}}
    </div>
    <div style="flex-basis:256px">
       something goes here
    </div>
</div>

But the result is, I see nothing because the <div id="ember589" class="ember-view g-map" > has height = 0.

The problem is fixed when I set the .g-map height = 100%, but that sounds a bit hacky to me, since the way we should set the map should be using g-map-canvas.

Is there any better way to achieve my result rather than this hacky method? Thanks.

I am having an issue using the advanced marker, but I am not sure how to troubleshoot.

Using the standard icon="path/to/img" works fine.

When I use the example of the advanced marker, I know the object is being read on map render, but nothing changes and there are no errors (added a stop in the console inside the object). It feels like I am missing something, Is there an import I need to do in my controller/route?

Im using Ember 2.8

Is it possible to do ajax request on click of marker?

I'm wondering how to do KML layers using this addon?
https://developers.google.com/maps/documentation/javascript/examples/layer-kml

Perhaps using just some plaun javascript for now?

When I implement this
openIcon: {
url: "/assets/images/pin-icon_open.svg",
size: new google.maps.size(30,30),
scaledSize: new google.maps.size(20,20),
anchor: new google.maps.point(15, 15),
origin: new google.maps.point(0, 0),
labelOrigin: new google.maps.point(30, 15)
},

I get Uncaught TypeError: google.maps.size is not a constructor

It seams that I am missing an import...

I'm trying to place the component in a bootstrap modal but the map shows only a gray rectangle when I open the model. I found a reason here: http://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap.

It looks like I need to send the resize event to the map but I don't have a handle on the map. Is there anything I can do?

I'm trying to use the Markers bound to address query feature and I would really like the zoom level to stay fixed even when I update the search query

Here is how i'm using it:

{{paper-input label="Address" value=address}}
{{#g-map markersFitMode='live' zoom=12 as |context|}}
  {{g-map-address-marker context address=address}}
{{/g-map}}

I have the address bound to an input but I would really like it to stay at a set zoom level when I search for a new address. What is the best way to do this?

I am trying to popup location and near by hospitals in a g-map

when i click on the submit button on the above form after entering location. The enterd location should be display In the g-map and also display near by hospitals with icon.

i am not getting how to display entered location and hospitals.in a g-map

Hello guys, I have a div which has dynamic width and height, and the dimensions are determined after the webpage is loaded. In order to make my google map take to full width and height of the div, I need to do the following:

.g-map{
    height:100%;
}
.g-map-canvas {
    width:100%;
    height: 100%;
}

Which is not the mentioned as the readme file. Should we add this into readme file? Or am I using a wrong approach to solve this problem?
Please give me some help on this. Thank you.

Hi, I get the following deprecation:

DEPRECATION: The `initialize` method for Application initializer 'register-google' should take only one argument - `App`, an instance of an `Application`. [deprecation id: ember-application.app-initializer-initialize-arguments] See http://emberjs.com/deprecations/v2.x/#toc_initializer-arity for more details.

Do you want me to open a PR for this?

Trying the example template code on the readme section, Marker bound to address query, the browser doesn't seem to like g-map-infowindow being nested in the g-map-address-marker block.
The error in the browser console is,
Uncaught Error: Assertion Failed: Must be inside {{#g-map}} or {{#g-map-marker}} components with context set

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle

https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions

how to add event on g-map. i just wanna get lat lng when user click the map

Deprecation warning originating from ember-g-map because it's calling set inside didInsertElement hook.

This is with version 0.0.20 of ember-g-map and 2.6.2 of ember-cli.

I need to access the google map object from another component so I can set zoom level and bounds when a user selects a marker from my dropdown component. How can I access the map from another component?

application template:
{{my-map model=items customOptions=customOptions}}

my-map component template:

<div id="floating-panel">
    {{!-- side panel to display information about the marker --}}
    {{side-panel}}
</div>

{{#g-map id="map" options=customOptions class="embed-responsive embed-responsive-4by3"  markersFitMode='live' as |context|}}

    {{#each model as |item index|}}{{item.address.geo.lng}}
        {{#g-map-marker context lat=item.address.geo.lat lng=item.address.geo.lng onClick=(action "handleClick" item context) as |markerContext|}}
        {{/g-map-marker}}
    {{/each}}

{{/g-map}}

<div class="mapMarkerSelector">
    {{!-- dropdown to select markers --}}
    {{marker-selector model=model }}
</div>

How would one go about opening/closing infoWindows that are:

1. bound to markers
2. bound to coordinates

Thanks for great plugin!

Would be great to open info window on mouse hover... Any ideas if that is possible? I can try submitting a PR, though need some help to start.

I can't find the way to animate a marker...

I've read through the documentation, but i didn't see any onClick events on the map itself. I'd want to be able to add new markers to the map with a click? Is that possible ?

Using this component can easily cause a parent component integration test to fail.

This is due to the Places api callback trying to call set on the destroyed component, in this case: g-map-address-route

Just create a bare component, put a gmap inside it and then a g-map-address-route:

{{#g-map
    markersFitMode='live'
    as |context|}}
  {{g-map-address-route context
    originAddress="Some address 1"
    destinationAddress="Some address 2"
  }}
{{/g-map}}

Run the integration test.

This also causes issues when quickly opening and closing a pane which contains one of these, since the component destroys before the places api returns.

Hello!

I just have tried your awesome library, however I don't see markers nor routes working :(
I tried with example from README.

What I'm doing wrong?

ENV['g-map'] = {
    libraries: ['places', 'geometry', 'visualization', 'drawing'],
    key: '**key'
  }

{{#g-map lat=37.7833 lng=-122.4167 zoom=12 as |context|}}
  {{g-map-marker context lat=37.7933 lng=-122.4167}}
  {{g-map-marker context lat=37.7833 lng=-122.4267 title=titleForSecondMarker}}
  {{g-map-marker context lat=37.7733 lng=-122.4067 label="3" title="Marker #3"}}
{{/g-map}}

I'm sure I'm missing something simple, but I can't seem to iterate over a collection to populate the map. Here's what I'm trying:

      {{#g-map markersFitMode='init' as |context|}}
        {{#each model as |campground| }}
          {{g-map-marker context lat=campgrond.latitude lng=campground.longitude}}
        {{/each}}
      {{/g-map}}

Map is showing as a blank gray square. Is there another way to loop? I can add some sample code to the README... Thank you!!!

I have installed
ember install ember-g-map

In confg/environment

ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' *.googleapis.com maps.gstatic.com",
'font-src': "'self' fonts.gstatic.com",
'connect-src': "'self' maps.gstatic.com",
'img-src': "'self' *.googleapis.com maps.gstatic.com csi.gstatic.com data:",
'style-src': "'self' 'unsafe-inline' fonts.googleapis.com maps.gstatic.com assets-cdn.github.com"
};

if (environment === 'production') {
ENV.baseURL = '/ember-g-map';
}

i am using

ember-cli version 2.5.1
npm version 3.9.2
OS Linux Fedora 20

The following error is coming

ember.debug.js:16591 Uncaught Error: Assertion Failed: Must be inside {{#g-map}} component with context set

Continuing the discussion from #38, We would like to give an opportunity to Junior developer to work on this feature.

I am implementing clustering support using Marker-Clusterer.

I will create a pull request if you are interested. If not, i will publish a separate ember-addon that extends yours.

Here is my example code:

<div class="wrapper" style="display: flex">
    <div class="g-map" style="flex: 7"></div>
    <div class="neighbour" style="flex: 0; min-width: 350px">
        <button>hide/show</button>
        {{ other content }}
    </div>
</div>

When i click a button - my neighbour's min-width become "0" and my "g-map" container width grows as it should, but map is needed to resize it to loads over all available space.
How can I call google.maps.event.trigger(map, 'resize'); as recommended by google to resize my map.
Here is my example images:

with opened sidebar:

with closed sidebar:

All I need is resize this map by code mentioned previously. How can I do it?
(May be you know how to renew map in other way?)