I am trying to achieve reverse geocoding with this amazing ember addon. All I want is when the user clicks on the map to propagate the coordinates using an action.

However I am not sure how I can achieve that. I tried:

{{google-map
  lat=40
  lng=-74
  zoom=8
  gopt_zoomControl=false
  type='map'
  coreViewClass='map/reverse-geocoding'
}}

And inside the view I have tried all events but nothing worked ^_^:

import Ember from 'ember';
import GoogleMapCoreView from '../google-map/core';

export default GoogleMapCoreView.extend({
  googleEvents: {
    click: 'didclick'
  },

  click: function() {
    alert('hey!');
  },
});

I defined a didClick action on ApplicationRoute but it got nothing.

How would you do that ? I think it's a good case to have it on ReadMe too :)

Google Maps API for Work developers must not include a key in their requests. Please refer to Loading the Google Maps JavaScript API for instructions.

Therefore ENV.googleMap = { key: 'AbCDeFgHiJkLmNoPqRsTuVwXyZ' }; won't work.

So how can I use my Google Maps API for Work Client ID using this addon as specified here?

Hey, I wonder if someone could see what I'm doing wrong here.

Here's my hbs

{{google-map lat=polyline.path.firstObject.lat
             lng=polyline.path.firstObject.lng
             zoom="8"
             polylines=polyline.path
             markers=polyline.markers}}

And that connects with my model definition /models/polyline.js:

import DS from 'ember-data';

export default DS.Model.extend({
  path: DS.attr('raw'),
  markers: (function() {
    var markers = [
      {title: 'one', lat: this.get('path.firstObject.lat'), lng: this.get('path.firstObject.lng'), description: 'hello 1'},
      {title: 'two', lat: this.get('path.lastObject.lat'), lng: this.get('path.lastObject.lng'), description: 'hello 2'}
    ];
    return markers;
  }).property('path'),
});

Aaaand the data that the polyline endpoint returns is this:

{
  "polyline": {
    "id": theid,
    "path": [
      {
        "lat": 2.8,
        "lng": -3.6
      },
      {
        "lat": 1.5,
        "lng": 0.2
      },
      {
        "lat": -3,
        "lng": 2
      },
      {
        "lat": -5.5,
        "lng": -0.8
      },
      {
        "lat": -5.9,
        "lng": -8.9
      },
      {
        "lat": -3.4,
        "lng": -11.6
      },
      {
        "lat": 1.2,
        "lng": -11.1
      },
      {
        "lat": 2.8,
        "lng": -7
      }
    ]
  }
}

As you see I have the same data as in the example, for testing. The markers gets displayed correctly, but the polyline don't show up.

Here's what the debug messages say:

DEBUG: [google-maps] creating new polyline: {map: null, path: [object Object]}
DEBUG: [google-maps] creating new marker: {title: one, map: null, position: (2.8, -3.6000000000000227)}
DEBUG: [google-maps] creating new marker: {title: two, map: null, position: (2.8, -7)}
DEBUG: [google-map] creating map with options: {zoom: 8, mapTypeId: roadmap, center: (2.8, -3.6000000000000227)}
DEBUG: [google-maps] creating new info-window: {map: [object Object], position: (2.8, -7), content: [object HTMLDivElement]}, anchor: 
DEBUG: [google-maps] creating new info-window: {map: [object Object], position: (2.8, -3.6000000000000227), content: [object HTMLDivElement]}, anchor: 

Thanks in advance!

Hi, im trying to follow your docs for the basic example and it doesnt seem to be working

This is my WIP: https://github.com/jmejias/google_maps_example

If you could point out the issue I appreciate it.

Thanks

Hi,

The documentation is lacking on this subject. I tried figuring it out using your Markers example, but still having trouble getting it to work.

Can you please provide an example of how to get the polygons on the map to handle the dragend event, for example?

Hi,

First of all, thanks for your great work.

I tried to install your addon on my app, but I have the following error: #collection: Could not find itemViewClass

In a controller Availability, I set up the Google Maps attributes, I added the tag in the template, I don't know what can possibly be wrong.

I also noticed that you're using the deprecated form of each block. Do you plan to update?

Lastly, I encountered an issue the other day with another addon: is your addon compatible with Handlebars 2.0?

Here's the link to my repo: https://github.com/lionelrudaz/wellnow-frontend/tree/google-maps

Let me know if you need more information.

Cheers,

Lionel

Hi!

When I try to integrate your add-on via npm, I always receive the same error:

File: huw-mcv/controllers/application.js
ENOENT, no such file or directory '/Users/PATHTOPROJECT/HUW-MCV/tmp/tree_merger-tmp_dest_dir-rhkm4PNw.tmp/ember-google-map/components/google-map.js'
Error: ENOENT, no such file or directory '/Users/PATHTOPROJECT/HUW-MCV/tmp/tree_merger-tmp_dest_dir-rhkm4PNw.tmp/ember-google-map/components/google-map.js'
    at Object.fs.statSync (fs.js:695:18)
    at addModule (/Users/PATHTOPROJECT/HUW-MCV/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:94:46)
    at addModule (/Users/PATHTOPROJECT/HUW-MCV/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:143:9)
    at /Users/PATHTOPROJECT/HUW-MCV/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:59:7
    at $$$internal$$tryCatch (/Users/PATHTOPROJECT/HUW-MCV/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:470:16)
    at $$$internal$$invokeCallback (/Users/PATHTOPROJECT/HUW-MCV/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:482:17)
    at $$$internal$$publish (/Users/PATHTOPROJECT/HUW-MCV/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:453:11)
    at $$rsvp$asap$$flush (/Users/PATHTOPROJECT/HUW-MCV/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1531:9)
    at process._tickCallback (node.js:419:13)

I changed the import path from google-map to ember-google-map as you can see, but I can’t get it running.

For the life of me I can't get the map to adjust it's zoom automatically when adding new markers, removing markers, or altering existing lat/lng of a marker in the markers array. All of the changes to the markers array that I just mentioned are updated on the map (meaning new ones appear, deleted ones disappear, etc) but the zoom never adjusts.

I did something really horrible probably in your google-map component & it fixed it:

foo: function() {
console.log('xxx here');
this.fitBoundsToContain();
}.observes('_markers.@each'),

I'm sure this a terrible idea but you got any advice on how I'd get the zoom to adjust? My hbs looks like:

google-map autoFitBounds=autoFitBounds lat=lat lng=lng markers=markers gopt_panControl=false gopt_zoomControl=false zoom=zoom markerViewClass="client/map"

I set zoom, lat, lng to sane defaults if markers is an empty array in my controller.

Any plans to add library support? For example, to include the 'drawing' library, the script tag would be:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>

The README is pretty much complete, but it's messy. I'd love to have the demo being on the index route, but with Twitter bootstrap theme for example and a menu showing help too, in which there would be a complete, readable documentation with TOC.

I can totally do the coding and integration of bootstrap, but I am not a native English speaker and I am very bad documentation writer when it's about non deep tech doc in the middle of the code ;-)

Anyone willing to help? Please do not drop a PR just right now like this, I want to talk about it first.

Hi all, my model have attributes longitude and latitude (not lat and lng) and I am trying to customize it as explaining in the wiki. But I got this error:

Uncaught TypeError: Cannot read property 'lat' of undefined

fired in helpers.js line 210

return helpers.makeObj(latKey || 'lat', val.lat(), lngKey || 'lng', val.lng());

I put some pieces of my code:

# template
{{google-map markers=model
                 markerController='map/my-marker'
                 lat=centerLat
                 lng=centerLng
                 zoom=zoom
                 autoFitBounds=true
                 gopt_zoomControl=false
                 type='road'}}

# my-marker controller
import Ember from 'ember';
import GoogleMapMarkerController from '../google-map/marker';

export default GoogleMapMarkerController.extend({
  lat: Ember.computed.alias('coords.latitude'),
  lng: Ember.computed.alias('coords.longitude')
});

Do I am doing something wrong?

Hi,

I could be misunderstanding the implementation, however I am getting an error in ember-cli of:

Uncaught Error: Assertion Failed: markerViewClass must be a subclass or an instance of Ember.View, not ember.js:

when trying to run this module, here's what I have done:

 npm install --save-dev ember-google-map

.. OK

in my-app/config/environment.js i have an entry of:

ENV.googleMap = {
      key: 'mygooglekey',
      lazyLoad: true
  };

in /pods/sites/edit/route.js i have:

import Ember from 'ember';
export default Ember.Route.extend({
    type: 'road',
    zoom: 5,
       afterModel: function (params) {
            return this.loadGoogleMap();
        }
 });

in /pods/sites/edit/template.hbs i have :

<div class="col-sm-6">
    {{google-map lat=model.latitude lng=model.longitude type=type zoom=zoom}}
</div>

in controllers/application.js i have:

import Ember from 'ember';
import {MAP_TYPES} from '../components/google-map';

export default Ember.Controller.extend({
  lat:         0,
  lng:         0,
  zoom:        5,
  type:        'road',
  mapTypes:    MAP_TYPES,
});

ember-cli is version 0.1.12

thanks for any advice,

Paul.

If I add description to each markers, and then click on every markers, all infowindows stay open.
I would like to show one infowindow at a time, as suggested in the Google Documentation regarding infowindow (https://developers.google.com/maps/documentation/javascript/infowindows#add)

Best practices: For the best user experience, only one info window should be open on the map at any one time. Multiple info windows make the map appear cluttered. If you only need one info window at a time, you can create just one InfoWindow object and open it at different locations or markers upon map events, such as user clicks. If you do need more than one info window, you can display multiple InfoWindow objects at the same time.

I can't find a way to do that. Any suggestion?
Thanks

Is there a way to silent CSP warnings?

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' maps.googleapis.com maps.gstatic.com".

EDIT: I know that adding unsafe-eval fixes the issue. The point of my question is not to do it. Thanks!

Would it be hard to implement passing an array of long / lat to draw a polyline over the map? Like https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

Thoughts?

It would be nice if newly-drawn shapes were bound to ember-google-map, so that they are automatically kept track of.

https://developers.google.com/maps/documentation/javascript/drawinglayer

Useful events:

google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {
      Ember.Logger.debug('polygoncomplete event fired');

      google.maps.event.addListener(polygon.getPath(), 'set_at', () => {
        Ember.Logger.debug('set_at event fired');
      });

      google.maps.event.addListener(polygon.getPath(), 'insert_at', () => {
        Ember.Logger.debug('insert_at event fired');
      });

      google.maps.event.addListener(polygon.getPath(), 'remove_at', () => {
        Ember.Logger.debug('remove_at event fired');
      });
    });
  }

In your index.js file you load the Google Maps SDK instantly. I think it will be a great enhancement to only load the SDK when the component is needed to save bandwidth.

We should provide an example of setting the appropriate content security policy in environment.js to avoid any warnings in the console so that other developers don't have to track down and resolve the security violations.

Is there a way provided by ember-google-map?

Hi,
I spent this weekend trying to make the google map in an ember app and found so many problems with that, I'm seeing that you have done a lot of work solving these problems in your plugin's 'core' folder which is great so I want to try it, but I also see that you are using a lot of controllers and some views which are getting removed in ember 2.0

Do you plan to change this plugin to use only components instead?

Does the ember-google-map add-on have support for Google Styled Maps? Google's API that controls the map styles. https://developers.google.com/maps/documentation/javascript/styling

I'm attempting to be able to redraw the center of the map based on geolocation. Adding map=view.googleMap to the component does not provide googleMap (console is telling me it's undefined). Everything else appears to be loading properly, I'm just looking to be able to access googleMap.setCenter(latlng).

Is there something I'm missing? Or, I suppose more importantly, is this currently possible? Thanks!

I am running into an issue with the latest version from master. I've provided the error, my code and versions below. I have a fork that I just updated from the latest on your master branch. I'm currently trying to hunt down why this is happening but thought you may get to it sooner. If I figure it out I'll send you a PR, otherwise hopefully you get this and know what is up.

Let me know what else would be helpful.

I am getting the following error:

markerViewClass must be a subclass or an instance of Ember.View, not 

My Code

= google-map lat=run.latitude lng=run.longitude zoom=zoom type=type markers=run.markers

Versions

Ember-CLI : 0.1.7
Ember : 1.8.1
Ember Data : 1.0.0-beta.14.1
Handlebars : 1.3.0
jQuery : 1.11.2
Ember Simple Auth : 0.7.2
Ember Simple Auth OAuth 2.0 : 0.7.2
Ember Simple Auth Testing : 0.7.2

I would like to work on adding support for a text-box that captures a particular location and supports auto-complete.

As per the original readME, the functionality would be as follows:
{{google-address value=theText resolvedGoogleData=thePropertyToStoreGoogleData resolvedLat=thePropertyWhereToStoreAddressLatitude resolvedLng=thePropertyWhereToStoreAddressLongitude boundNorthWestLat=optionalBoundNorthWestLatitude boundNorthWestLng=optionalBoundNorthWestLongitude boundSouthEastLat=optionalBoundSouthEastLatitude boundSouthEastLng=optionalBoundSouthEastLongitude map=theOptionalMapToBeLinked }}

Can you please provide guidance for how you think this should be implemented? Do you have existing Ember code that we can leverage and componentize?

Hi,

I'm refactoring my code, which was using the google api directly, to use your component.

I'd like to do something like this on page load:

map.fitBounds(bounds);

But I'm not sure how to grab the map object. In my code it was created using:

var map = new google.maps.Map(this.$('#listings-map')[0])

Hello,
I am setting a marker on the map dynamically via a location search bar.

The search bar gets latitude and longitude info and then sets a controller property:

// lat and lng provided by a search bar
controller.set('markers',Ember.A([{
    lat: lat,
    lng: lng,
}]));

I'm using the component as so:

{{google-map autoFitBounds=true markers=markers}}

I have checked that the google-map component is updating the markers correctly using the console using the view number of the component, (the ember-google-map is ember518 in my case):

Ember.View.views['ember518'].get('markers')  //returns correct values

It also displays the marker on the map correctly.

However, it does not automatically scroll and resize the map to fit the marker.

Am I missing something?

Fairly Ember rookie trying to implement custom markers.

According to the wiki page:

markerViewClass: name or class of the view to use for each marker, must extend google-map/marker view

So in my app I did

import DefaultMarkerView from 'ember-google-map/views/google-map/marker';

And get an error:

Uncaught Error: Could not find module `ember-google-map/views/google-map/marker` ...

whereas importing from 'ember-google-map/core/helpers' does work.

I tried all sort of relative paths to get to it to no avail, so I compared things with other addons (like ember-cli-materialize). They have all their component classes and templates inside addon and inside app there are but mere exporting facades, e.g.:

import MaterializeCollapsibleCard from 'ember-cli-materialize/components/md-card-collapsible';

export default MaterializeCollapsibleCard;

As a horrible expedient, copying google-map's views folder from app to addon fixes the import issue, so I guess the "facade-export from addon to app" approach should work.

Please correct me If I'm missing something here.

Hi, I followed your example https://github.com/huafu/ember-google-map/wiki/Provided-Tools-and-Classes-%28API%29#example-use-case-responding-to-events and now I can trigger an action when you click a marker.

How can I pass, say, the marker title with the event?

Usecase: I have a list of locations on the left and a map on the right. When you tap a marker, I need to scroll to the corresponding list-item for that marker.

I needed to use the drawing manager, so i created one using your framework

import Ember from 'ember';

import helpers from 'ember-google-map/core/helpers';
import GoogleObjectMixin from 'ember-google-map/mixins/google-object';

var computed = Ember.computed;
var alias = computed.alias;
var fmt = Ember.String.fmt;
var on = Ember.on;
/**
 * @class GoogleMapCircleView
 * @extends GoogleMapCoreView
 */
export default Ember.Object.extend(GoogleObjectMixin, {
  googleFQCN: 'google.maps.drawing.DrawingManager',

  googleProperties:{
    drawingMode:{name:'drawingMode'},
    drawingControl:{name:'drawingControl',optionOnly:true},
    drawingControlOptions:{name:'drawingControlOptions',optionOnly:true},
    map:         {readOnly: true},
  },

  _coreGoogleEvents:      ['circlecomplete','markercomplete','polygoncomplete','polylinecomplete','rectanglecomplete'],

  drawingMode: google.maps.drawing.OverlayType.MARKER,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [
      google.maps.drawing.OverlayType.MARKER,
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.POLYLINE,
      google.maps.drawing.OverlayType.CIRCLE
    ]
  },

  initGoogleObject: on('init', function () {
    // force the creation of the object
    if (helpers.hasGoogleLib() && !this.get('googleObject')) {
      this.createGoogleObject();
    }
  }),

  destroyGoogleObject: on('destroy', function () {
    var object = this.get('googleObject');
    if (object) {
      // detach from the map
      object.setMap(null);
      this.set('googleObject', null);
    }
  }),

  initGoogleMap: on('didInsertElement', function () {
    debugger;
  })
});

but to initialise and connect the object, i needed to add this to my controller, which isn't ideal

DrawingManager.create({googleEventsTarget:view.get('targetObject'),map:view.get('map'),                                      ev_markercomplete:'markerAdded',ev_polygoncomplete:'polygonAdded'});

do you have a recommendation to adding unsupported objects to the map ? i will be doing something similar for custom overlays

I'd like polygon support if possible: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

Thanks!

How would I pass a model array from my Ember Data store to the markers value?

For example, I have this code:

controllers/trips/show.js

export default Ember.Controller.extend({
  lat:         40.8,
  lng:         -74.5,
  zoom:        5,
  type:        'road',
  mapTypes:    MAP_TYPES,
  markers:     [
    {title: 'liftforward', lat: 41.74646, lng: -74.98427, description: 'New office'},
    {title: 'tallan', lat: 40.74646, lng: -73.98427, description: 'Old office'},
  ],
  }
});

templates/trips/show.hbs

{{google-map lat=lat lng=lng type=type zoom=zoom markers=markers infoWindows=infoWindows}}

If I'm showing the map on a trips/show template, how do I pass trip.locations to the markers value? A trip hasMany locations; and locations have the structure including lat and lng values like in the sample markers array.

I'd like to request the option of placing circles on the map: https://developers.google.com/maps/documentation/javascript/examples/circle-simple

Thanks a great component!

Hey, having an issue with Google options. Made a map a while back that worked 100% correctly, but I just noticed that it is now not taking gopt options when it used to. The map still works fine but none of the options are applying (no scroll wheel, no UI, etc.etc.). I've tried going back to previous versions of the addon but that didn't seem to help. I am using the Ember 1.13 beta, could that be causing it?

1. With latest Ember 1.12.1 I get deprecation warning related to changes with computed properties:
   http://emberjs.com/deprecations/v1.x/#toc_computed-properties-with-a-shared-getter-and-setter
   in fitBoundsArray computed property:
   https://github.com/huafu/ember-google-map/blob/master/app/components/google-map.js#L161
2. With the same 1.12.1 I get:
   Ember.required is deprecated as its behavior is inconsistent and unreliable in here: https://github.com/huafu/ember-google-map/blob/master/addon/mixins/google-object.js#L62

Would be nice to have this fixed :)

Hi again,

My map is working perfectly in Google & Firefox. In Safari, I'm getting the following error:

[Error] TypeError: undefined is not an object (evaluating 'val.lat')

Following the stack trace:

    /**
     * Initialize the map
     */
    initGoogleMap: on('didInsertElement', function () {
      var canvas;
      this.destroyGoogleMap();
      if (helpers['default'].hasGoogleLib()) {
        canvas = this.$('div.map-canvas')[0];
        this.createGoogleObject(canvas, null); // <<----------
        this._scheduleAutoFitBounds();
      }
    }),

/////////

    /**
     * Creates the google object
     *
     * @method createGoogleObject
     * @param {*} [firstArg]
     * @param {Object} [optionsOverrides]
     * @return {google.maps.MVCObject}
     */
    createGoogleObject: function (optionsOverrides) {
      var opt = this.serializeGoogleOptions(), object, firstArg, Class;
      if (arguments.length === 2) {
        firstArg = optionsOverrides;
        optionsOverrides = arguments[1];
      }
      opt = Ember['default'].merge(opt, optionsOverrides);
      Ember['default'].debug(fmt(
        '[google-maps] creating new %@: %@', this.get('googleName'), opt
      ));
      Class = this.get('googleClass');
      if (firstArg) {
        object = new Class(firstArg, opt);
      }
      else {
        object = new Class(opt);
      }
      this.set('googleObject', object);
      this.synchronizeEmberObject(); // <<<<------------
      return object;
    },

////////

    /**
     * Synchronize this Ember object by reading all values of the properties from google object
     */
    synchronizeEmberObject: function () {
      var def = this.get('_compiledProperties'),
        go = this.get('googleObject');
      if (!go) {
        return;
      }
      this.beginPropertyChanges();
      for (var i = 0; i < def.length; i++) {
        if (!def[i]._cfg.readOnly) {
          this.setProperties(def[i].readGoogle(go));  // <<<<-------
        }
      }
      this.endPropertyChanges();
    },

////////


  /**
   * Reads the value from the given google object
   *
   * @method readGoogle
   * @param {google.maps.MVCObject} googleObject
   * @returns {Object}
   */
  GoogleObjectProperty.prototype.readGoogle = function (googleObject) {
    var val;
    if (this._cfg.read) {
      val = this._cfg.read.call(this, googleObject);
    }
    else if (this._cfg.optionOnly) {
      return Object.create(null);
    }
    else {
      val = googleObject['get' + this._cfg.name.capitalize()]();
    }
    return this.fromGoogleValue(val);  // <<<<-------- //// VAL IS UNDEFINED HERE!
  };

 /////////////

  /**
   * Convert the value from google to Ember
   *
   * @method fromGoogleValue
   * @param {*} value
   * @returns {Object}
   */
  GoogleObjectProperty.prototype.fromGoogleValue = function (value) {
    var val;
    if (this._cfg.fromGoogle) {
      val = this._cfg.fromGoogle.call(this, value);   // <<<----- 
    }
    else {
      val = helpers['default'].makeObj(this._cfg.key, value);
    }
    return val;
  };

 ////////////

    _latLngFromGoogle: function (latKey, lngKey, val) {
      if (arguments.length === 1) {
        val = latKey;
        latKey = null;
      }
      return helpers.makeObj(latKey || 'lat', val.lat(), lngKey || 'lng', val.lng());  // <<<-----
    },

////////

Any ideas?

can you please explain how to use gopt_ on an example?

It would be a great feature if we could draw a road between two points.
It could be the shortest road first, but a lot of further custom settings could be added.

I am working on a website developed in Ember-CLI and having Embe Google Map add-on. Ember Google Map add-on is implemented successfully in the app. On clicking the marker the info window shows up with the text, but I would like to perform some other operations as well on click on the marker.
I tried the process explained here:
"https://github.com/huafu/ember-google-map/wiki/Provided-Tools-and-Classes-%28API%29#example-use-case-responding-to-events"
and
"https://github.com/huafu/ember-google-map/wiki/Examples#responding-to-google-events"

Following are the code:

Template : map/map.hbs:

{{google-map ...  markerViewClass='map/marker'
  markerInfoWindowTemplateName='map/marker'
  markerController='map/marker'}}

view: map/marker.js:

export default GoogleMapMarkerView.extend({
  googleEvents: { 
    click: 'markerClick'  /* event tried mouseover and rightclick to get respective events*/
  }
});

controller : map/marker.js (also tried in application.js):

export default GoogleMapMarkerController.extend({
  actions: {
    markerClick: function () {
      alert("Clicked here"); 
      return false;
    }
  }
});

whenever i try to click the marker I get the following message :

Uncaught Error: Nothing handled the action 'markerClick'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.

Am i missing anything here or where might be the issue.
Can you please help me out in this issue.

For example, on a click event, change the fillColor to blue.

I tried this, but it does not work.

didClick: function(event){
  event.set('controller.model.fillColor','blue');
}

After upgrading ember-cli to 0.2.2 I'm seeing many depreciation notices in my console:

I'm currently running 0.0.19 of ember-google-map, the only difference I see between 0.0.20 is "Always auto-fit bounds feature" So I don't think upgrading will fix it.

DEPRECATION: You attempted to set `lat` from `<app@controller:google-map/marker::ember541>`, but object proxying is deprecated. Please use `model.lat` instead. See http://emberjs.com/guides/deprecations/#toc_objectcontroller for more details.
    at exports.default.mixin.Mixin.create.setUnknownProperty

I'm seeing the depreciation for the following properties:

• lat
• lng
• isWindowVisible
• zIndex
• googleEvents
• isVisible
• isClickable
• icon
• opacity
• title
• isDraggable
• infoWindowTemplateName
• templateName
• hasInfoWindow

I can provide any additional info needed.
Thanks!

I was wondering if it was just a problem i have or if you also experience it.

Using the component in a normal ember build works fine

If it is minified by ember build --environment-production a website complains with the error message
"google-map/initializers/google-map-component"

Should I be doing something else apart from adding the option when I call the map component?

{{google-map lat=lat lng=lng zoom=zoom type=type markers=markers gopt_streetViewControl=true}}

Do I have to add gopt_streetViewControlOptions?

This may end up being solved by glimmer, but notice the wait and performance issues on our recent hackathon app.

The page takes upwards of 15 seconds to render, just because Ember has to create hundreds of components.

Perhaps a fix would be to not allow an option to not use components for each marker, and instead, use a simple Ember.Object.

Thoughts?

Im getting this error and I have lat defined in the controller as well as lng, zoom, and type.

This is the line of code im getting the error on the helper.js line 210

return helpers.makeObj(latKey || 'lat', val.lat(), lngKey || 'lng', val.lng());

this are the errors:

Uncaught TypeError: Cannot read property 'lat' of undefined
and
Uncaught TypeError: Cannot set property 'position' of undefined

As @FutoRicky meant by #32, make a street-view component working with the map or as a standalone component.

HI I am trying to add markers to the map when ever the user clicks

( i have tried adding a pojo and a Google map maker view) every time i add, i can see that the components makers.length is increasing but i cant see the markers on the map

controller

import Ember from 'ember';
import GoogleMapMarkerView from '../google-map/marker';

export default Ember.Controller.extend({
  battles:Ember.A([]),
  actions:{
    click:function(view,event){
      var gMarker = GoogleMapMarkerView.create({title: 'one', lat: event.latLng.A, lng: event.latLng.F, description: 'hello 1', isDraggable: true});
      var marker = {title: 'one', lat: event.latLng.A, lng: event.latLng.F, description: 'hello 1', isDraggable: true};
      this.get('battles').push(gMarker);
      console.log(view.get('markers.length'))
    }
  }
});

template

{{google-map ev_click="click" markers=battles}}

Hi,

I'm troubling with following problem: I'm compiling the app with the ember-cli-cordova package, everything is working fine on my browser, but when I open the same route in my Android-app I just get a blank screen instead of the Google Map with markers, circles and polylines.

Looking at the logs of the app I get the following message:

D/CordovaLog(10021): file:///android_asset/www/assets/vendor.js: Line 14423 : WARNING: [google-map] Something went wrong with Google Map library. If you think it is not your side, please report the issue at https://github.com/huafu/ember-google-map/issues. Also be sure to have used `return this.loadGoogleMap()` in one of the 3 `model` hooks of each route which would use the component (only if you have set `google.lazyLoad` to true in your `config/environment.js.`)

I'm not using lazyLoad.

This is my ember-cli configuration:

DEBUG: -------------------------------
DEBUG: Ember             : 1.10.0
DEBUG: Ember Data        : 1.0.0-beta.15
DEBUG: jQuery            : 1.11.2
DEBUG: Ember Simple Auth : 0.7.3
DEBUG: -------------------------------

The version of ember-cli-cordova is 0.0.15.

This is how I'm calling the plugin:

{{google-map
          lat=centerLat lng=centerLon zoom=zoom type=type
          markers=latLonBounds
          polylines=polylinesBounds
          circles=circleBounds
          autoFitBounds=true
          gopt_styles=mapsStyle
          markerInfoWindowTemplateName='map/info-window'}}

Any ideas where the issue could be? Any help is appreciated :-)

I'm not quite sure what I'm doing wrong - help would be appreciated.

I've tried including the base component in my application:

{{google-map lat=0 lng=0}}

And all I get is a blank/empty div I've tried setting other lat and lng values but to no avail.

Everything is installed properly - I get the following when booting the ember app:

DEBUG: [google-maps] creating new map: {zoom: 5, mapTypeId: roadmap, center: (0, 0)}

The DOM elements appear to be there, but I can't see anything!

I'm not sure is this a known issue for you guys, but obviously removing only the listeners is not good enough for gc. Any ideas ?