Trouble putting Google Maps into Ember template

[kiraamaa]

So I started by following along with the Google Maps JavaScript API, which is set up for a regular HTML/JS front end sans a front end framework. How do I put code like this

  <div id="map"></div>
       <script>
         var map;
         function initMap() {
           var brooklyn = {lat: 40.647536, lng: -73.945365};
           var sweatshop = {lat: 40.719187, lng: -73.959874};
           var map = new google.maps.Map(document.getElementById('map'), {
             center: brooklyn,
             zoom: 12
           });
           var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
           var marker = new google.maps.Marker({
             position: {lat: 40.7144055, lng: -73.9350954},
             map: map,
             icon: iconBase + 'parking_lot_maps.png'
           });
           var marker1 = new google.maps.Marker({
             position: brooklyn,
             map: map
           });
           var marker2 = new google.maps.Marker({
             position: sweatshop,
             map: map,
             title: 'Sweatshop Cafe'
           });
           var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Sweatshop</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Sweatshop</b> is a multi-disciplinary design studio' +
          'built into a cafe environment where inspiration is key and '+
          'collaboration is alive.</p>'+
          '</div>'+
          '</div>';

          var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 200
          });
          marker2.addListener('click', function() {
           infowindow.open(map, marker2);
         });

         //    var poly;
         //  var map;
          //
         //  function initMap() {
         //    map = new google.maps.Map(document.getElementById('map'), {
         //      zoom: 12,
         //      center: {lat: 40.647536, lng: -73.945365}  // Center the map on Chicago, USA.
         //    });
          //
         //    poly = new google.maps.Polyline({
         //      strokeColor: '#000000',
         //      strokeOpacity: 1.0,
         //      strokeWeight: 3
         //    });
         //    poly.setMap(map);
          //
         //    // Add a listener for the click event
         //    map.addListener('click', addLatLng);
         //  }
          //
         //  // Handles click events on a map, and adds a new point to the Polyline.
         //  function addLatLng(event) {
         //    var path = poly.getPath();
          //
         //    // Because path is an MVCArray, we can simply append a new coordinate
         //    // and it will automatically appear.
         //    path.push(event.latLng);
          //
         //    // Add a new marker at the new plotted point on the polyline.
         //    var marker = new google.maps.Marker({
         //      position: event.latLng,
         //      title: '#' + path.getLength(),
         //      map: map
         //    });
         }
       </script>
       <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAEZ6laVASVcJR3wxqjCyyD-C14LCEctng&callback=initMap"
       async defer></script>

into an ember template? I'm thinking the map itself should be component since I'll want to view it at all times across several different views.

[kiraamaa]

Trying ember-leaflet per Rachel's suggestion: http://www.ember-leaflet.com/docs/installation

[kiraamaa]

It seems like Leaflet crashes my server and pushes my entire hard drive into a sad downspiral of doom. Can I set up a one-on-one to figure out whether I should use ember for this project or just scrap it and use Google's API with regular HTML?

[kiraamaa]

I was running into an infinite loop because I named my route and controller leaflet-map. I deleted them and re-generated a route and controller called leaflet and I can now render a map.