×

Discussion Board

Results 1 to 3 of 3
  1. #1
    Registered User
    Join Date
    Feb 2012
    Posts
    38

    How to Diplay infobubbles for the custom image marker in Nokia MAPs

    Hi,

    Here is my code which displays custom image marker from my local system, but how to display infobubbles for that marker wheen mouse over on that marker. Please see my code below and give me the solution for it. Thanks in advance.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ovi Maps API Example</title>
    <script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="map" style="width:600px; height:400px;"></div>
    <script type="text/javascript">
    // Authentication set up is the first thing that you must do with the API
    ovi.mapsapi.util.ApplicationContext.set({"appId": MYAPPID", "authenticationToken": "MY TOKEN"});

    var map = new ovi.mapsapi.map.Display(
    document.getElementById("map"), {
    components: [
    //behavior collection
    new ovi.mapsapi.map.component.Behavior(),
    new ovi.mapsapi.map.component.ZoomBar(),
    new ovi.mapsapi.map.component.Overview(),
    new ovi.mapsapi.map.component.TypeSelector(),
    new ovi.mapsapi.map.component.ScaleBar() ],
    zoomLevel: 10,
    center: [52.51, 13.4]
    });
    //remove zoom.MouseWheel behavior for better page scrolling experience
    map.addComponent( new ovi.mapsapi.map.component.zoom.DoubleClick() );
    map.addComponent( new ovi.mapsapi.map.component.panning.Drag() );
    map.addComponent( new ovi.mapsapi.map.component.panning.Kinetic() );

    map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    // map.set("baseMapType", map.SATELLITE);
    map.set("baseMapType", map.NORMAL);

    var marker = new ovi.mapsapi.map.Marker(
    new ovi.mapsapi.geo.Coordinate(52.51, 13.4),{
    title: "marker",
    visibility: true,
    icon: "photos/cust.png",
    //offset the top left icon corner so that it's
    //centered above the coordinate
    anchor: new ovi.mapsapi.util.Point(32, 32)
    });
    map.objects.add(marker);
    </script>
    </body>
    </html>

  2. #2
    Nokia Developer Moderator
    Join Date
    Mar 2003
    Location
    Lempäälä/Finland
    Posts
    29,144

    Re: How to Diplay infobubbles for the custom image marker in Nokia MAPs

    Please do observe the categories here, I again moved this from the monetarization category.

    For infobubble, check the markers example from: http://www.developer.nokia.com/Commu...r_Ovi_Maps_API you can also run it from: http://dev.drjukka.com/OviMaps/index.html .

    Basically from the engine js, check the onMarkerSelected fucntion for details on showing the infobuble.

  3. #3
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: How to Diplay infobubbles for the custom image marker in Nokia MAPs

    For the updated Nokia Map API, there is a code example in the Wiki of an InfoBubble created on an mouseover event see: http://www.developer.nokia.com/Commu...light_a_Marker. If you want the bubble to disappear, just add infoBubbles.removeBubble() as a mouseout event.

Similar Threads

  1. Replies: 3
    Last Post: 2012-04-20, 09:25
  2. Change Marker in Google Maps
    By Mobile Developer in forum Mobile Java General
    Replies: 9
    Last Post: 2011-12-08, 13:18
  3. Replies: 2
    Last Post: 2010-08-30, 12:03
  4. Diplay gif image doesn't work!!!
    By ammanage in forum Mobile Java Media (Graphics & Sounds)
    Replies: 3
    Last Post: 2009-05-14, 06:47

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •