[moved] Mobile mh5 markers and infobubbles

**pamepros** · 2012-06-26, 03:18

I can't get the map to display multiple infobubbles and setting the infobubbles for each point.
I need the infobubble to display several images and text when a user clicks the marker.
I see the poi in the map but when I click on it it shows me an infobubble with the "name" tag, but I want it to show the infobubble I create afterwards.

All I have now is this:

Code:

	nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/0.1.9/lib/";
		var map = new nokia.mh5.components.Map({
                                appId: "demo_wwzrmoloHAFVvyW",
                                appCode: "Vgl_08RQWnjJo92Lw1F_uQ",
				center: {		
          			longitude: -58.4,
	           		latitude: -34.6
		        },
				zoom: 12,
				configuration: {
					distanceUnit: "km",
					search: null,
				}
            });

		var poi = map.createPoi("img/rojo.png", {longitude: -58.4, latitude: -34.6, name:"Accidente"});
 		map.moveTo(poi);
		var params = {
    	                     content: ["title","description"],
                	     left: "img/accidente.png",
    	                     right: "img/corte_parcial.png",
    	                     maxWidth: 340
		}
		nokia.mh5.components.InfoBubble(poi,params,function(b){console.log(b)})

Thanks,
Pam

**ltomuta** · 2012-06-26, 15:00

Hi Pam,

this is how I made it work for me:

Code:

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=100">
    <!-- Definitions of mobile-friendly documents e.g. for BlackBerry: -->
    <meta name="HandheldFriendly" content="True">
    <!-- Definitions of mobile-friendly documents for Microsoft Browser: -->
    <meta name="MobileOptimized" content="width">
    <!-- iOS viewport definitions: -->
    <!--meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- disable BlackBerry UI events -->
    <meta name="touch-event-mode" value="native">
    <meta name="cursor-event-mode" value="native">

    <link rel="stylesheet" href="../../lib/mh5.css" type="text/css">
    <style>
        #mapContainer {
            height: 400px;
        }
	</style>
</head>
<body>

    <script src="../../lib/mh5.js"></script>

    <div id="mapContainer"></div>

    <script type="text/javascript">
		nokia.mh5.assetsPath = "../../lib/";
		var map = new nokia.mh5.components.Map({
                                appId: "demo_wwzrmoloHAFVvyW",
                                appCode: "Vgl_08RQWnjJo92Lw1F_uQ",
				center: {		
          			longitude: -58.4,
	           		latitude: -34.6
		        },
				zoom: 12,
				listeners: {
					  "poiclick": function(e) { 
									var params = {
									content: ["title","description"],
									listeners:{
										click: function(){alert("main")},
										leftclick: function(){alert("left")},
										rightclick: function(){alert("right")}
									 },
									 left: "img/accidente.png",
									 right: "img/corte_parcial.png",
									 maxWidth: 340
									}
									this.showInfoBubble(e.data[0],params,function(b){console.log(b)});
									e.preventDefault();
								},
					  "mapmovestart": function(e) {},
					  "mapmoveend": function(e) {},
					  "mapclick": function(e) {},
					  "mapdblclick": function(e) {},
					  "maplongpress": function(e) {},
					  "maptrackingstart": function(e) {},
					  "maptrackingend": function(e) {},
					  "mapzoomchange": function(e) {}
				   },
				configuration: {
					distanceUnit: "km",
					search: null,
				}
            });
			
		document.getElementById("mapContainer").appendChild(map.root);
		
		var poi = map.createPoi("img/rojo.png", {longitude: -58.4, latitude: -34.6, name:"Accidente"});
 		map.moveTo(poi);

		

    </script>

</body>
</html>

edited by Ron

**pamepros** · 2012-06-26, 15:17

Thanks Lucian,

I understand your example, what if I had many pois that should show different infobubbles (different content and images) depending on each poi?
I don't know if it's clear, I will be receiving the pois data by json and will need to run them in a loop to create each one with their own data and bubble information. In your example there's only one poi and one bubble set for the whole map.
Is this possible with nokia maps?

Thanks again,
Pam

**ltomuta** · 2012-06-26, 15:24

Each time your "poiclick" listener is called you will know which POI it was accessed (e.data[0]) so you can dynamically make decisions about which format should be used for the respective POI and set the right info bubble params in the showInfoBubble call.

**ltomuta** · 2012-06-26, 16:24

I found a bit more time to play with this and here's my take on what you may be looking at:

Code:

"poiclick": function(e) {
		if(e.data[0].data.type=="car")
		{
			var params = {
			content: ["title","description"],
			listeners:{
				click: function(){alert("main")},
				leftclick: function(){alert("left")},
				rightclick: function(){alert("right")}
			 },
			 right: "img/car.png",
			 maxWidth: 340
			}
			this.showInfoBubble(e.data[0],params,function(b){console.log(b)});
			}
			else
			{
				var params = {
					content: ["title","description"],
					listeners:{
						click: function(){alert("main")},
						leftclick: function(){alert("left")},
						rightclick: function(){alert("right")}
					},
					left: "img/bike.png",
					maxWidth: 340
				}
			this.showInfoBubble(e.data[0],params,function(b){console.log(b)});							
			}
		e.preventDefault();
	},

and

Code:

		var poi = map.createPoi("img/red.png", {longitude: -58.4, latitude: -34.6, name:"Crash 1", type:"bike"});
		map.createPoi("img/blue.png", {longitude: -58.45, latitude: -34.6, name:"Crash 2", type:"car"});
 		map.moveTo(poi);

Resulting in map1.jpg

**ZieL** · 2012-06-27, 11:02

Hi Pam,

please be aware that there is a dedicated forum for MH5: http://www.developer.nokia.com/Commu...r-mobile-HTML5. Every new question there notifies us developers of MH5 framework. Here we were notified by the moderator.

Lucian is completely right. But you could simplify the code a little bit by unifying infobubble listeners:

Code:

        nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/0.1.9/lib/";
        var map = new nokia.mh5.components.Map({
                appId: "demo_wwzrmoloHAFVvyW",
                appCode: "Vgl_08RQWnjJo92Lw1F_uQ",
                center: {
                    longitude: -58.4,
                    latitude: -34.6
                },
                zoom: 12,
                infoBubble: {
                    listeners: {
                        click: function(e){/*my handler*/},
                        leftclick: function(e){/*my handler*/},
                        rightclick: function(e){/*my handler*/}
                    }
                },
                listeners: {
                    poiclick: function(e) {
                        var poi = e.data[0],
                            data = poi.data;

                        this.showInfoBubble(poi, {
                            content: ["title", "description"],
                            title: data.name,
                            description: data.address,
                            left: "img/accidente.png",
                            right: "img/corte_parcial.png"
                        });
                        e.preventDefault();
                    }
                }
            });

        document.getElementById("mapContainer").appendChild(map.root);

       var poi = map.createPoi("img/red.png", {longitude: -58.4, latitude: -34.6, name:"Crash 1", address: "My Address 1", type:"bike"});
       map.createPoi("img/blue.png", {longitude: -58.45, latitude: -34.6, name:"Crash 2", address: "My Address 1", type:"car"});
       map.moveTo(poi);

Currently we are working on simplifying the infobubble usage.

Leo

**ltomuta** · 2012-06-27, 13:01

I moved the thread to the right forum, but now at least in my browsers the code snippets which include the full HTML code are not rendered.
I copied below Leo's code just in case, until we figure out if the rendering problem is on my side only or global.

Code:

        nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/0.1.9/lib/";
        var map = new nokia.mh5.components.Map({
                appId: "demo_wwzrmoloHAFVvyW",
                appCode: "Vgl_08RQWnjJo92Lw1F_uQ",
                center: {
                    longitude: -58.4,
                    latitude: -34.6
                },
                zoom: 12,
                infoBubble: {
                    listeners: {
                        click: function(e){/*my handler*/},
                        leftclick: function(e){/*my handler*/},
                        rightclick: function(e){/*my handler*/}
                    }
                },
                listeners: {
                    poiclick: function(e) {
                        var poi = e.data[0],
                            data = poi.data;

                        this.showInfoBubble(poi, {
                            content: ["title", "description"],
                            title: data.name,
                            description: data.address,
                            left: "img/accidente.png",
                            right: "img/corte_parcial.png"
                        });
                        e.preventDefault();
                    }
                }
            });

        document.getElementById("mapContainer").appendChild(map.root);

       var poi = map.createPoi("img/red.png", {longitude: -58.4, latitude: -34.6, name:"Crash 1", address: "My Address 1", type:"bike"});
       map.createPoi("img/blue.png", {longitude: -58.45, latitude: -34.6, name:"Crash 2", address: "My Address 1", type:"car"});
       map.moveTo(poi);

**ltomuta** · 2012-06-27, 13:07

Leo,

for Pam's case a if on poi's type would still be needed in that listener, so that different layouts are applied.

I was about to ask you why my bubble's listeners are never called but I think I can already see the answer in your code

I have to try it in my little test app.

**ZieL** · 2012-06-27, 17:55

Hi Lucian,

If you have only two different poi types then probably the best way is to introduce "type" property like you did. But if all your pois are different then it's better to save all the needed data directly in the poi. So that you can just pass them to the showInfoBubble method:

Code:

                       var poi = e.data[0],
                            data = poi.data;

                       this.showInfoBubble(poi, {
                            content: ["title", "description"],
                            title: data.name,
                            description: data.address,
                            left: data.leftImage,
                            right: data.rightImage
                        });

Leo

**ltomuta** · 2012-06-27, 19:54

Yep, that makes a lot more sense. Thanks Leo.

**pamepros** · 2012-06-28, 19:29

Hi guys, thanks for your help, I solved it like this (I post it just in case someone else gets into the same situation) :

Code:

listeners:{
					"poiclick": function(e) {

							var params = {
								content: ["title","description","more"],
								listeners:{
									click: function(){alert("main")},
									leftclick: function(){alert("left")},
									rightclick: function(){alert("right")}
								},
								maxWidth:340
							}
								if(e.data[0].data.state=="FLUENT"){
									params.left = "img/verde.png";	
								}
								if(e.data[0].data.state=="CONGESTED"){
									params.left = "img/amarillo.png";	
								}
								if(e.data[0].data.state=="DELAYED"){
									params.left = "img/rojo.png";	
								}
								if(e.data[0].data.interrupcion=="TOTAL"){
									params.right = "img/corte_total.png";	
								}
								if(e.data[0].data.interrupcion=="PARTIAL"){
									params.right = "img/corte_parcial.png";	
								}
						this.showInfoBubble(e.data[0],params,function(b){console.log(b)});
						e.preventDefault();
					},
				}

And then creating each poi from the data I get from my json api:

Code:

              if(data.length){
			var len = data.length;
			for(var i in data){
				var dato = data[i];
				map.createPoi("img/rojo.png", {
					longitude: dato.longitude, 
					latitude: dato.latitude, 
					name: dato.street+" "+dato.number,
					description: dato.comment,
					more: "Fuente: "+dato.source,
					incidence: dato.incidence_type, 
					interrupcion :dato.interruption_type, 
					state: dato.state, 
					type: dato.type 
				})
			}
		}

Now I need to start playing inside the listener with the params for each ocasion.
They need to improve the documentation of the maps api, it works great but with so little information it gets easier for developers to use google maps api, if you need any help doing this don't doubt in asking

Thanks again for your help!!
Pam

**wmseto** · 2012-06-28, 22:08

@pamepros Great!! Encourage you to write a wiki article about your experience!

http://www.developer.nokia.com/Commu...ory:Nokia_Maps

**m00zg** · 2012-07-09, 16:07

Originally Posted by ltomuta

I was about to ask you why my bubble's listeners are never called but I think I can already see the answer in your code

I've got the same question and still haven't got the answer. Did you figure out why the listeners aren't called?

**ZieL** · 2012-07-09, 20:59

Hi m00zg,

The listeners have to be defined in the infoBubble definition and not in showInfobubble function call. Take a look at my example bellow.

Leo

**m00zg** · 2012-07-10, 08:29

I've tried different combinations and still cannot have it work

. Even with this simple code I've got an error in Chrome it is "Uncaught TypeError: Cannot read property 'cartopoi' of undefined", while in Firefox it is "(void 0) is undefined".

Code:

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,
            maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="../lib/mh5.css">
        <link rel="stylesheet" href="http://api.maps.nokia.com/mobile/0.1.9/lib/colors.css">
    </head>
    <body class="mh5_hwacc_body">
        <script src="http://api.maps.nokia.com/mobile/0.1.9/lib/mh5.js"></script>

        <div id="app_location"
            style="width: 320px; height: 420px; position: absolute;">
        </div>

	<script>

		nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/0.1.9/lib/";
        var map = new nokia.mh5.components.Map({
                appId: "demo_wwzrmoloHAFVvyW",
                appCode: "Vgl_08RQWnjJo92Lw1F_uQ",
                center: {
                    longitude: -58.4,
                    latitude: -34.6
                },
                zoom: 12,
				tracking: false,
				
                infoBubble: {
                    listeners: {
                        click: function(e){},
                        leftclick: function(e){},
                        rightclick: function(e){}
                    } 
                },
				
			listeners: {
				poiclick: function(e) {	},
				mapmovestart: function() {/*your listener*/},
				mapmoveend: function() {/*your listener*/},
				mapclick: function(e) {/*your listener*/},
				mapdblclick: function(e) {/*your listener*/},
				maplongpress: function(e) {/*your listener*/},
				mapzoomchange: function(e) {/*your listener*/}
			}

            });

        document.getElementById("app_location").appendChild(map.root);

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

Any help would be appreciated.

Discussion Board

Thread: [moved] Mobile mh5 markers and infobubbles

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

Map markers not always shown when max zoomed out

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

Multiple markers at this line

Google Map URL J2ME markers

Multiple markers at this line with RThread

Posting Permissions