Component Async Loading Coordinations

by enorl76

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<div class=".form--container">
   <form id="form">
   
   <div>
     Address: <input type="text" id="address" name="address" value="1600 Amphitheatre Parkway Mountain View CA" class="wide" />
   </div>
   <div>
     <input type=submit value="Submit" />
   </div>
   
   </form>
</div>

<div id="mapCanvas">
replaced when googlemaps loads
</div>

<script>
require(['ComponentA'], function(ComponentA) {
   var componentA = new ComponentA();
})
</script>

<!--<script src="//maps.google.com/maps/api/js?"></script>
<script>
window.gmap = new google.maps.Map(document.getElementById('mapCanvas'))

</script>-->

CSS

input.wide { width:300px; }

#mapCanvas { height: 250px; width: 100%; }

JavaScript

define('ComponentA', ['ComponentB'], function(ComponentB) {
  var ComponentA;
  return ComponentA = (function() {
    var self;

    self = null;

    function ComponentA() {
      self = this;
      self.componentB = new ComponentB();
      $(this.initialize);
    }

    ComponentA.prototype.initialize = function() {
      console.log('ComponentA initialize');
      $("#form").submit(self.form_submit);
      self.componentB = new ComponentB();
      if (navigator.geolocation) {
        return navigator.geolocation.getCurrentPosition(function(pos) {
          var markers;
          markers = [];
          markers.push(new google.maps.Marker({
            position: {
              lat: pos.coords.latitude,
              lng: pos.coords.longitude
            }
          }));
          return self.componentB.updateMap(markers);
        });
      }
    };

    ComponentA.prototype.form_submit = function(e) {
      var address;
      e.preventDefault();
      console.log('form_submit');
      address = $("#form input[name='address']").val();
      return self.componentB.addMarkerForAddress(address);
    };

    return ComponentA;

  })();
});

define('ComponentB', ['//maps.google.com/maps/api/js?'], function() {
  var ComponentB;
  return ComponentB = (function() {
    var self;

    self = null;

    function ComponentB() {
      self = this;
      google.maps.event.addDomListener(window, 'load', this.initialize);
    }

    ComponentB.prototype.initialize = function() {
      var element;
      console.log('ComponentB initialize');
      element = document.getElementById('mapCanvas');
      return self.gmap = new google.maps.Map(element, {
        center: {
          lat: 56.1304,
          lng: -106.3468
        },
        zoom: 3
      });
    };

    ComponentB.prototype.updateMap = function(markers, zoom) {
      console.log('calling updateMap. self.gmap=%s', typeof self.gmap);
      $.each(markers, function(i, item) {
        return item.setMap(self.gmap);
    ...