Matt-Jensen / ember-cli-g-maps

Deprecated Google Maps Addon
http://matt-jensen.github.io/ember-cli-g-maps
MIT License
59 stars 31 forks source link

Auto-adjust zoom and center as markers are added/deleted #68

Open blangslet opened 7 years ago

blangslet commented 7 years ago

Hi Matt, I was looking through your documentation and didn't see the gmaps.js fitZoom or fitLatLngBounds methods exposed.

My use case is very similar to the 'live' markersFitMode at https://github.com/asennikov/ember-g-map#map-fits-to-show-all-initial-markers that will auto-adjust zoom and center as markers are added/deleted, as well as when the viewport shrinks or expands.

I was wondering if I overlooked something, or if you had any quick tips to achieve these results. Thanks so much!

Matt-Jensen commented 7 years ago

This is a great feature idea @blangslet, however implementing this will have to take a backseat to #66, which is removing bower deps (aka Gmaps.js) and provides the same features, but more declaratively.

While all I can offer you currently is to add this to the roadmap, your use case can be achieved immediately with some kind of wrapper layer around a g-maps component, with some variation of the ember-g-map code here

blangslet commented 7 years ago

Thanks for the quick response @Matt-Jensen! I'll let you know if I come up with anything clean.

marcemira commented 7 years ago

Hello @blangslet @Matt-Jensen, I need that as well, ASAP. Is there any quick workaround to get that now? Thanks!

Matt-Jensen commented 7 years ago

@blangslet if you need it that soon, I'd extend this addon's g-maps component in your app with the ember-g-map code here

marcemira commented 7 years ago

@Matt-Jensen Brilliant! I'll do so, thank you so much for the quick response! :)

ezy commented 7 years ago

@Matt-Jensen thanks for the great plugin and feedback - am currently implementing the ember-g-map fitToMarkers() code as suggested above. When extending the component I've created a new Ember component component/g-maps-extend.js. But I'm struggling to fire the extension on the page I have my {{g-maps lat=lat lng=lng zoom=zoom}} hook. Any suggestions?

import Ember from 'ember';
// import gMaps from 'npm:ember-cli-g-maps';
// also tried loading the npm module via ember-browserify but no luck so far
import gMaps from 'ember-cli-g-maps/components/g-maps';

export default gMaps.extend({
  init() {
    console.log('g-maps extended');
  }
});
Matt-Jensen commented 7 years ago

This really seems to be a popular feature lately! Since any solution with this existing codebase will likely be too complicated for Github comments, if you (@ezy) would be willing to publish a repo we could collaborate on and link to from this issue... I'd be happy to help you.

ezy commented 7 years ago

I've managed to iron out the issues for this @Matt-Jensen so posting up here for anyone who finds it useful. My issue was calling {{g-maps}} rather than the new component name {{g-maps-extend}} in the template. So component extension should go as follows:

// /templates/index.hbs
{{g-maps-extend name="yourMapName" markers=markers}}

Then in the new component extension:

// /components/g-maps-extend.js
import Ember from 'ember';
import gMaps from 'ember-cli-g-maps/components/g-maps';

const { computed, isPresent } = Ember;

export default gMaps.extend({
  defaultGMapState: computed(function() {
    const markers = this.get('markers').filter((marker) => {
      return isPresent(marker.lat) && isPresent(marker.lng);
    });

    if (markers.length > 0 &&
        (typeof FastBoot === 'undefined')) {
      const map = this.get('map');
      const bounds = new google.maps.LatLngBounds();
      const points = markers.map((marker) => {
        return new google.maps.LatLng(marker.lat, marker.lng);
      });

      points.forEach((point) => bounds.extend(point));
      map.fitBounds(bounds);
    }
  })
});

I use a computed function in the controller to cycle through my Ember data and set the markers input to an array. This gets picked up by the markers hbs input and used in the fitBounds() calculation.