1

I have been trying to popup an info bubble, but it simply doesn't get poped up, and throws no error too. Am I Missing anything in the following code?

index.html

<!-- Loading here maps -->
<script type="text/javascript" charset="UTF-8"
    src="http://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
        <script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
        <script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
        <script type="text/javascript"  charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>

Controller.js

$scope.plotMarker = function(lat,lon, location){

//Step 1: initialize communication with the platform
  var platform = new H.service.Platform({
   app_id: '<your App id>',
   app_code: '<Your App code',
   // useCIT: true // I really wish to know what this useCIT stands for
 });

 var defaultLayers = platform.createDefaultLayers();

 //Step 2: initialize a map  - not specificing a location will give a whole world view.
 var map = new H.Map(document.getElementById('map_canvas'),
          defaultLayers.normal.map);

 //Step 3: make the map interactive
 // MapEvents enables the event system
 // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
 var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
 // Create the default UI components
 ui = H.ui.UI.createDefault(map, defaultLayers);
 // Now use the map as required...
 moveMapToBerlin(map, lat, lon);
};

     /**
     * Moves the map to display over Berlin
     *
     * @param  {H.Map} map      A HERE Map instance within the application
     */
    function moveMapToBerlin(map, lat, lon){

      map.setCenter({lat:lat, lng:lon});
      map.setZoom(14);
      // Create a marker icon from an image URL:
      var icon = new H.map.Icon('images/redpin.png');

      // Create a marker using the previously instantiated icon:
      var marker = new H.map.Marker({ lat: lat, lng: lon }, { icon: icon });

      // Add the marker to the map:
      map.addObject(marker);
      // alert(map.getZoomLevel());
       map.addEventListener('tap', function (evt) {
             map.setCenter(evt.target.getPosition());

    openBubble({lng: lon, lat: lat}, '<b>Hello World!</b>');

    // $( '.H_ib' ).css( "font-size", "12px" );
    // $( '.H_ib_content' ).css( "min-width", "290px" );
    // $( '.H_ib_content' ).css( "font", "12px/14px 'Helvetica Neue',Arial,Helvetica,sans-serif" );
     }, false);
  }

    /**
     * Opens/Closes a infobubble
     * @param  {H.geo.Point} position     The location on the map.
     * @param  {String} text              The contents of the infobubble.
     */
    function openBubble(position, text){
        alert(bubble);
     if(!bubble){
        bubble =  new H.ui.InfoBubble(
          position,
          {content: text});
        ui.addBubble(bubble);
        alert(angular.toJson(position));
      } else {
        bubble.setPosition(position);
        bubble.setContent(text);
        bubble.open();
      }
    }

It seems the open Bubble method is being executed, as all the alerts pop-up in this section but The ifo bubble doesn't seem to appear in any way.

Does anybody have any idea why this code is behaving so?

Kailas
  • 7,350
  • 3
  • 47
  • 63

1 Answers1

0

@Kailas , in openBubble function, after you add bubble to ui (ui.addBubble ) add following line. bubble.open();

That should start actually showing the bubble on the map.

You have used bubble.open() in else section but not in if section of your code.

According to HERE Maps documentation https://developer.here.com/documentation/download/maps_js_html5_nlp/3.0.5/Maps%20API%20for%20JavaScript%20v3.0.5%20Developer%27s%20Guide.pdfhere ,

addBubble (bubble) This method adds an info bubble to the UI.

WhereAs

open() (for H.ui.InfoBubble) This method opens the info bubble (setting its state to OPEN).

Hope this helps.

rational
  • 121
  • 1
  • 11