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>