places-search

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

places-search.js

import Component from "@ember/component";
import { get } from "@ember/object";

export default Component.extend({
  query: "",
  lat: "",
  lng: "",
  zoom: "",
  attributeId: "",
  init() {
    this._super(...arguments);
    this.set("results", []);
  },
  didReceiveAttrs() {
    this._super(...arguments);
    this.searchPlaces(
      get(this, "query"),
      get(this, "lat"),
      get(this, "lng"),
      get(this, "zoom"),
      get(this, "elementId")
    );
  },
  /**
   * Search google places api
   *
   *
   * @param {string} query name to search for
   * @param {number} lat latitude to search
   * @param {number} lng longitude to search
   * @param {number} zoom zoom area
   * @param {string} elementId id of element to select as map container
   */
  searchPlaces(query, lat, lng, zoom, elementId) {
    /**
     * Wait until leaflet has been rendered otherwise google maps functions will begin
     * to fail due to the map container lacking a width & height as well as the geolocations
     * being unknown. If this is not functioning properly google will will report the error
     * a is null
     * Which means it could not perform it's operations due to the map.
     */
    if (lat != 0 && lng != 0) {
      let location = new google.maps.LatLng(lat, lng); // Google generated location
      // Inform google which div is the map wrapper.
      var map = new google.maps.Map(document.getElementById("map"), {
        center: location,
        zoom: zoom
      });
      // instantiate Places service to search
      var service = new google.maps.places.PlacesService(elementId);
      // Search Google Places for the selected business and location
      service.textSearch(
        {
          location: location,
          query: [query]
        },
        callback // callback to build map of all found locations
      );
    }
    /**
     * Take the response from google and format it into a usable array
     * @param {object} results
     */
    let callback = results => {
      let places = results.map(function(place, index) {
        let rObj = {};
        rObj["lat"] = place.geometry.viewport.f.b;
        rObj["lng"] = place.geometry.viewport.b.b;
        rObj["placeId"] = place.place_id;
        rObj["address1"] = place.formatted_address.split(",")[0];
        rObj["city"] = place.formatted_address.split(",")[1];
        rObj["state"] = place.formatted_address
          .split(",")[2]
          .substring(1)
          .split(" ")[0];
        rObj["zipcode"] = place.formatted_address
          .split(",")[2]
          .substring(1)
          .split(" ")[1];
        rObj["country"] = place.formatted_address.split(",")[3];
        rObj["index"] = index;
        return rObj;
      });
      return places;
    };
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}