here-api Uncaught TypeError: Cannot read property 'addDomListener' of undefined at

Question

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.

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 & 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);

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 & 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.

working: The correct lng & lat show up in the db when the address changes and in chrome inspection the lng & lat are in the html.

For google I had to use this:

google.maps.event.addDomListener(window, 'load', initialize);

for here I used(not sure if its correct method): H.Map.event.addDomListener(window, 'load', initialize);

Below is the head portion of app thats not working

<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js"
          type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js"
          type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js"
          type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css"
        href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />

below is the partial view html.erb

<div class="card-body">
    <div id="mapContainer" style="width: 100%; height: 400px"></div>

    <script>
        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: <%= @location.latitude %>, lng: <%= 
@location.longitude %>};
            var map = new 
H.Map(document.getElementById('mapContainer'), maptypes.normal.map, {
                center: location,
                zoom: 10

            });
        }


       H.Map.event.addDomListener(window, 'load', initialize);

    </script>


  </div>

Many thank for your help.

Answer 1

There is no such function H.Map.event.addDomListener.

If you want to call initialize on window load event, use:

 window.addEventListener('load', initialize);

Regarding map events, HERE has some methods under the H.mapevents package. Make sure to load mapsjs-mapevents.js if you need them. This would be useful for operations like adding an event listener on a map object, or even enabling events on the map like panning, zooming, etc.

You can refer to the javascript examples.