How to decrease the Icon (Image) marker size.

[jasfox]

Hi,

I changed two colors. I need another one also. Border(Stroke) of that pin is appearing in white. I need to change that color also.

Please read the API reference link - the answer can be found there

pen This property holds the color of the outline of the shape in which the marker's text label is rendered.

mapRoute.objects.get(1).set("pen",{strokeColor: "#333"});

[Ulala]

Hi,

Small white portion is appearing in between brush color and pen color.

1) How to make that pen color stroke in bold / solid.
2) How to remove that small white portion appearing in between brush color and pen color.

mapRoute.objects.get(1).set("brush",{color: "008000"});
mapRoute.objects.get(1).set("pen",{strokeColor: "#000000"});

[jasfox]

Hi,
Small white portion is appearing in between brush color and pen color.

1) How to make that pen color stroke in bold / solid.
2) How to remove that small white portion appearing in between brush color and pen color.

You can't do that with standard markers as the white outline is part of the base image, as the playground example states you can only alter the following attributes of a Standard Marker:

• shape (the shape type)
• brush (the fill color)
• pen (the stroke color)
• textPen (the text color)
• text (the label text)

If you want your own shape and/or Bold text you would have to use SVG graphics instead:
http://api.maps.nokia.com/2.1.1/play...ustomsvgmarker

Alternatively use Icons or sprite Markers as discussed previously on this thread.

[Ulala]

It's Ok.

Another Major issue is coming by using Nokia Maps API is as follows:

I am using increasing and decreasing the Font size of web content by clicking on (+) and (-) buttons. This is not working properly (i.e., I kept Some limit for stopping the bigger size of font, but it is continuously increasing and same error for decreasing.) I think some javascript conflict occurred by including this JS file : <script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>.

How to solve this issue? Please provide me the solution.

[jasfox]

It's Ok.

Another Major issue is coming by using Nokia Maps API is as follows:

I am using increasing and decreasing the Font size of web content by clicking on (+) and (-) buttons. This is not working properly (i.e., I kept Some limit for stopping the bigger size of font, but it is continuously increasing and same error for decreasing.) I think some javascript conflict occurred by including this JS file : <script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>.

How to solve this issue? Please provide me the solution.

The description of your problem is unclear. Do you have a zoom bar present on the map? or are you re-sizing the text on the browser? If the latter, then then the issue is with your browser, not the API. If you are experiencing a JavaScript error, you should be able to get further information through opening the JavaScript console. Is an error message appearing? I can only suggest you look at the changes you have made to your code in the last 15 minutes and slowly revert them until you discover what the problem is.

[Ulala]

Hi,
Ok. I'll check overall functionality for Javascript conflict error, and now I need the solution for these below problems.

(1) :- We are displaying Nokia Map of width : 298px, and Height 298px. In that info bubble on mouse over related content will display, but that info bubble content is not coming to center. (i.e., some part is hiding.) We have to move the map to view the total content. I need automatically adjust the info bubble content to center on mouse over.

(2) :- Nokia maps are not displaying in mozilla firefox version 3.6.19.

(3) :- In Internet Explorer 8.0.7600.16385, Error is displaying as "map.objects is null or not an object". There Multiple markers are not displaying.

Please rectify these problems.

[jasfox]

Hi,

(1) :- We are displaying Nokia Map of width : 298px, and Height 298px. In that info bubble on mouse over related content will display, but that info bubble content is not coming to center. (i.e., some part is hiding.) We have to move the map to view the total content. I need automatically adjust the info bubble content to center on mouse over.

Infobubbles don't do that, they are always displaced from the anchor point. Depending upon how much screen real estate you need , your first fix would be to restrict the default width as shown:

infoBubbles.options.defaultWidth = 400;

Secondly, if you need more space, then you may want to look at using a tabbed infobubble:
http://www.developer.nokia.com/Commu...bed_Infobubble

If you really want display some information centered and on mouseover, you don't want an infoBubble at all, you are probably looking at creating a tooltip. Note that you can never click on a tooltip, as it automatically disappears once its marker loses focus.

http://www.developer.nokia.com/Commu...eate_a_Tooltip

(2) :- Nokia maps are not displaying in mozilla firefox version 3.6.19.

This is almost certainly to do with the same JavaScript error as described below. FF 3.6 has long reached end-of-life, so unless your user base is stuck on Firefox 3.6.19 for some bizarre reason, I would suggest testing on a more recent browser.

(3) :- In Internet Explorer, Error is displaying as "map.objects is null or not an object". There Multiple markers are not displaying.

It looks like you have not initialised your map properly. map is null, hence map.objects is not an object. Check which line your code is failing on through opening up your JavaScript console, and make sure the map variable is initialised before it. This is nothing to do with the API, merely standard JavaScript programming.

[Ulala]

Hi,

Please check these below codes. I am not finding out the problem. Please rectify it.

1) In IE8.0, Multiple markers are not displaying. Plz Check this below code.

<!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.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    .nm_bubble_content{
              color:black;
              background:white;
              border: 1px solid white;
              padding:0px;			  	  			  	  
    }
    </style>
  </head>
<body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;"></div>
<script type="text/javascript">       
        
var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.5162, 13.32341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

    map = new nokia.maps.map.Display(
    document.getElementById("map"),
    {
    'zoomLevel': 12,
    'center': [52.5152, 13.380001],
            components: [ 
                    new nokia.maps.map.component.Behavior(),
                            new nokia.maps.map.component.ZoomBar(),
                            new nokia.maps.map.component.TypeSelector(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

</script>
  </body>
</html>

2) In IE8.0, Marker is not displaying. Also the map is disturbed. Plz Check this below code.

<!-- This is the code for Nokia Map - Single Pin (Marker) with popup onclick message -->
<!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>
   </head>
    <body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 298px; height: 298px; position: absolute;"></div>

<style type="text/css">
.nm_bubble_content{
	  color:black;
	  background:white;
	  border: 1px solid white;
	  padding:0px;			  	  			  	  
}
</style>

<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var alat = 52.530390;
var along= 13.385190;
var bubbleContainer = new nokia.maps.map.component.InfoBubbles();
//bubbleContainer.options.defaultWidth = 50;
	var	coords = new nokia.maps.geo.Coordinate(alat, along);
       // alert(coords);
       	var	marker = new nokia.maps.map.StandardMarker(coords);
	var     infoBubble;
	var	restore_bubble = false;
	var	bubbleText = "Test message here. Testing for infobubbles length."

	map = new nokia.maps.map.Display(
		document.getElementById("map"),
		{
	    	'zoomLevel': 12,
	    	'center': [alat, along],
			components: [ 
				new nokia.maps.map.component.Behavior(),
                                        new nokia.maps.map.component.ZoomBar(),
                                        new nokia.maps.map.component.TypeSelector(),
				bubbleContainer
			]
		});
    
       var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
       //var markersIconsUrl = "photos/cust.png";
        startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 100, 100, 50, 80);
        startMarker = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(52.530390, 13.385190), {
                        icon: startIcon,
                        anchor: new nokia.maps.util.Point(12, 12)

                });
                startMarker.addListener("mouseover", function() {
                infoBubble = bubbleContainer.addBubble(bubbleText, coords);
		restore_bubble = true;
         });
        map.objects.add(startMarker);
</script>
  </body>
</html>

[jasfox]

Neither of these problems are to do with the API. The first case is a feature of Internet Explorer, in that you really shouldn't have a <div> with the same id as a variable.

map = new nokia.maps.map.Display(

Is trying to update the DIV, what you need is

var map = new nokia.maps.map.Display(

The second case is that your HTML document is malformed, so the Browser is guessing what goes where, and FF gets it right but IE gets it wrong.

Here is a hint - the DOCTYPE declaration should be the absolute first line in any document.

Try running your documents through a prettifier such as HTML tidy http://infohound.net/tidy/ and ensure the mark up is valid before assuming the API is at fault. e.g. http://validator.w3.org/

[Ulala]

Thank you.

When we mouseover/click on marker, anchor point is showing "arrow" symbol. How should we change it to "hand" symbol (i.e., Regular anchor point for any link appear).

[jasfox]

startMarker.addListener("mouseover", function(evt) {
document.body.style.cursor = 'pointer';
});

startMarker.addListener("mouseout", function(evt) {
document.body.style.cursor = 'default';
});

[Ulala]

Hi,

1) How to put link to marker pin. I.e., When we click on marker pin, I need to redirect to the new window tab of desired URL?

2) In Nokia maps display for multiple markers we fixed zoom level to 4. Can we dynamically change this zoom level based on multiple marker coordinate points.. Please check the below code. Here 3 marker pins are displaying, but they are overlapping, if we zoom it, the three will display. I set "Zoom level : 4" because if more pins are there then they should display.
If we increase the zoom level....., If I have more marker pins...., they are displaying far in the map and we need to move the map. Please give me solution for this.

[I want to attach images regarding this issue but here attachment option is not available].

Code is shown below.

<!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.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    .nm_bubble_content{
              color:black;
              background:white;
              border: 1px solid white;
              padding:0px;			  	  			  	  
    }
    </style>
  </head>
<body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;"></div>
<script type="text/javascript">       
        
var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.6162, 13.380341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

   var map = new nokia.maps.map.Display(
    document.getElementById("map"),
    {
    'zoomLevel': 4,
    'center': [52.5152, 13.380001],
            components: [ 
                    new nokia.maps.map.component.Behavior(),
                            new nokia.maps.map.component.ZoomBar(),
                            new nokia.maps.map.component.TypeSelector(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

</script>
  </body>
</html>

[jasfox]

Hi,

1) How to put link to marker pin. I.e., When we click on marker pin, I need to redirect to the new window tab of desired URL?

To click on a marker and get a pop-up with a link:

  var infoBubbles = new nokia.maps.map.component.InfoBubbles();
  map.addComponent( infoBubbles);
  var marker = new nokia.maps.map.StandardMarker(center, {
    $html: "<a href='your link'>http://www.example.com</a>"
    });

marker.addListener("click" ,  function(evt) { 
    infoBubbles.addBubble(evt.target.$html, evt.target.coordinate);          
    }, false);  

map.objects.add(marker);

For a direct link just use:

    var marker2 = new nokia.maps.map.StandardMarker(center);
    marker2.addListener("click" ,  function(evt) { 
        window.location = 'http://www.example.com'; 
}, false);

Hi,

2) In Nokia maps display for multiple markers we fixed zoom level to 4. Can we dynamically change this zoom level based on multiple marker coordinate points.. Please check the below code. Here 3 marker pins are displaying, but they are overlapping, if we zoom it, the three will display. I set "Zoom level : 4" because if more pins are there then they should display.
If we increase the zoom level....., If I have more marker pins...., they are displaying far in the map and we need to move the map. Please give me solution for this.

If you want to zoom to a set of markers, place them in a container, and use the zoomTo method:
http://api.maps.nokia.com/2.1.1/play...tandardmarkers