CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3ember-cli
Beth H
Beth H

Reputation: 31

Ember Cli G Maps Markers not showing up

I am using ember-cli-g-maps addon for ember v1.8.0 and although I have used the code listed in online guide, I can not get the marker to show up. I know it must be something simple my eyes are not seeing. The google map is showing up with no errors from the server or in the console. You can see the project at https://github.com/bhoskins/embergmaps.

This is the config/environment.js file:

  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",
    'style-src': "'self' 'unsafe-inline' fonts.googleapis.com maps.gstatic.com"
  },

This is the templates/map.hbs file:

<h1>Map</h1>
{{g-maps name="my-map" lat=lat lng=lng zoom=zoom scrollwheel=false}}

This is the routes/map.js file:

import Ember from 'ember';
/* global google */

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.setProperties({
      lat: 34.74048,
      lng: -82.0463009,
      zoom: 14,
      markers: Ember.A([
      {
        id: 'McDonalds',
        lat: 34.751603,
        lng: -82.0463009,
        address: '890 N Main St, Woodruff, SC 29388, USA',
        infoWindow: { content: '<p>This is McDonalds</p>', visible: true },
        anchorPoint: new google.maps.Point(),
        animation: google.maps.Animation.DROP,
        clickable: true,
        crossOnDrag: true,
        cursor: 'pointer',
        draggable: true,
        label: 'A',
        opacity: 0.3,
        optimized: true,
        title: 'string',
        visible: true,
        zIndex: 999
      }
        ])
    });
  }

});

What in the world am I missing? Thanks

Upvotes: 0

Views: 195

Answers (1)

Beth H
Beth H

Reputation: 31

Duuuh, in the templates/map.hbs file you have to add markers=markers. So it would read:

<h1>Map</h1>
{{g-maps name="my-map" lat=lat lng=lng zoom=zoom markers=markers}}

Upvotes: 3

Related Questions