title: here-api Uncaught TypeError: Cannot read property 'addDomListener' of undefined at
body: <p>I am trying to integrate here-api map into my rails 5 app. Some background I have developed a similar app page with google maps in the past following a course successfully. Using here-api as an alternative as google recently be charging at certain levels.</p>
  
  <p>I have successfully been able to display a here map with lng and lat hard coded. however 
  I am getting a blank screen were the map once was when I try to integrate the rails database info lng &amp; lng. trying the same  naming conventions and method as I have done in the past with integrating google. I am using/used gem 'geocoder', '~> 1.4'. as I am converting the address from the form into lng ltd that I had to for google map. 
  the chrome console log has an error: Uncaught TypeError: Cannot read property 'addDomListener' of undefined
  at line: 
  H.Map.event.addDomListener(window, 'load', initialize);</p>
  
  <p>expected outcome: using addDom to initialize when one changes there address it updates the db with the new lng lat and using var location to fetch the lng &amp; lat. in place of the hard coded coordinates that was successful. expecting the here-api to use those lng, lat and it display the map same as the hard coded version. However I get a blank screen. </p>
  
  <p>working: The correct lng &amp; lat show up in the db when the address changes and in chrome inspection the lng &amp; lat are in the html.</p>
  
  <p>For google I had to use this:</p>
  
  <p>google.maps.event.addDomListener(window, 'load', initialize);</p>
  
  <p>for here I used(not sure if its correct method):
  H.Map.event.addDomListener(window, 'load', initialize);</p>
  
  <p>Below is the head portion  of app thats not working</p>
  
  <pre><code>&lt;script src="http://js.api.here.com/v3/3.0/mapsjs-core.js"
            type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="http://js.api.here.com/v3/3.0/mapsjs-service.js"
            type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js"
            type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css"
          href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" /&gt;
  </code></pre>
  
  <p>below is the partial view html.erb</p>
  
  <pre><code>&lt;div class="card-body"&gt;
      &lt;div id="mapContainer" style="width: 100%; height: 400px"&gt;&lt;/div&gt;
  
      &lt;script&gt;
          var platform = new H.service.Platform({
              'app_id': 'my_appid_info-FROM_HERE',
              'app_code': 'myappcodeinfo_FROM HERE'
          });
  
          // Obtain the default map types from the platform objec
  
          var maptypes = platform.createDefaultLayers();
  
  
  
          // Instantiate (and display) a map object:
          function initialize() {
              var location = {lat: &lt;%= @location.latitude %&gt;, lng: &lt;%= 
  @location.longitude %&gt;};
              var map = new 
  H.Map(document.getElementById('mapContainer'), maptypes.normal.map, {
                  center: location,
                  zoom: 10
  
              });
          }
  
  
         H.Map.event.addDomListener(window, 'load', initialize);
  
      &lt;/script&gt;
  
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Many thank for your help.</p>