Question

So if the original question is tl;dr, I guess all I really need to know is how to turn:

App.CompaniesController = Em.ArrayController.extend({
    content: [
        App.Company.create({ markerText: "Bondi Bar", lat: -33.890542, lng: 151.274856, number: 4, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png", isOpen: true}),
        App.Company.create({ markerText: "Coogee Beach Grill", lat: -33.923036, lng: 151.259052, number: 5, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red05.png", isOpen: false}),
        App.Company.create({ markerText: "Maroubra Smoke Shop", lat: -33.950198, lng: 151.259302, number: 1, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png", isOpen: true}),
  ],

  open: function() {
    return this.get('content').filterProperty('isOpen', true);
  }.property('content.@each')

});

into a simple array:

var locations = [
    ['Bondi Bar', -33.890542, 151.274856, 4, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png'],
    ['Maroubra Smoke Shop', -33.950198, 151.259302, 1, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png']];

or modify:

for (var i = 0; i < locations.length; i++) {
    createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
}

to iterate over CompaniesController.open to create a new map marker for each item.

---

Original Question

I’m trying to create a simple state in an ember app that displays only currently open companies in a given area on a google map, based on a Company.isOpen filtered computed property on a controller. I would like to have custom markers for each company on the map, that when clicked, display the company name and hours.

I have looked at https://github.com/samwich/ember-map-demo (ember + g-maps demo where when you click on the map, a new marker is added) and http://jsfiddle.net/kjy112/pra3K/ (g-maps demo with multiple locations and custom clickable markers from an array) and I know the answer is staring me in the face, but I suck right now.

I have a jsfiddle here – http://jsfiddle.net/PVbvK/7/ – of where I’m a bit stuck.

First, I setup the basics:

App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        event: Ember.Route.extend({
            route: '/',
            connectOutlets: function (router) {

                router.get('applicationController').connectOutlet('companies');
            }
        })
    })
  });

App.Company = Em.Object.extend({
    markerText: null,
    lat: null,
    lng: null,
    number: null,
    iconUrl: null,
    isOpen: null

  });



App.CompaniesController = Em.ArrayController.extend({
    content: [
        App.Company.create({ markerText: "Bondi Bar", lat: -33.890542, lng: 151.274856, number: 4, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png", isOpen: true}),
        App.Company.create({ markerText: "Coogee Beach Grill", lat: -33.923036, lng: 151.259052, number: 5, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red05.png", isOpen: false}),
        App.Company.create({ markerText: "Maroubra Smoke Shop", lat: -33.950198, lng: 151.259302, number: 1, iconUrl: "http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png", isOpen: true}),
  ],

  open: function() {
    return this.get('content').filterProperty('isOpen', true);
  }.property('content.@each')

});

Then I super-sloppily threw a lot of the previous demo in the CompaniesView’s didInsertElement to get the fiddle working:

App.CompaniesView = Ember.View.extend({
  templateName: 'companies',
  map: null,
  didInsertElement: function () {

    var map = null;
    var markerArray = []; //create a global array to store markers
    var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red04.png'],
    ['Coogee Beach', -33.923036, 151.259052, 5, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red05.png'],
    ['Cronulla Beach', -34.028249, 151.157507, 3, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red03.png'],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red02.png'],
    ['Maroubra Beach', -33.950198, 151.259302, 1, 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red01.png']];

    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(-33.923036, 151.259052),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(this.$().get(0), myOptions);


    this.set('map', map); //save for future updations
    this.$().css({ width: "600px", height: "600px" });

    for (var i = 0; i < locations.length; i++) {
    createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
    }

    var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    });

    function createMarker(latlng, myTitle, myNum, myIcon) {
        var contentString = myTitle;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: myIcon,
            zIndex: Math.round(latlng.lat() * -100000) << 5,
            title: myTitle
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });

        markerArray.push(marker); //push local var marker into global array
    }

  }
});

Quick and dirty but I’m a fool right now…

So how do I get the contents of CompaniesController.open to create custom markers on the google map? If anyone could lend a hand it would be much appreciated, Cheers!

Answer 1

This is just a matter of using your controller.open property from the view, so mainly:

var locations = this.get('controller.open');
locations.forEach(function(location){
        createMarker(
            new google.maps.LatLng(location.get('lat'), location.get('lng')),
            location.get('markerText'), 
            location.get('number'),
            location.get('iconUrl'));        
}, this);

Complete jsfiddle here: http://jsfiddle.net/PVbvK/9/