×

Discussion Board

Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Registered User
    Join Date
    Apr 2010
    Location
    Rosario, Argentina
    Posts
    38

    Exclamation [moved] Mobile mh5 markers and infobubbles

    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

  2. #2
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,355

    Re: Mobile mh5 markers and infobubbles

    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
    Last edited by Nokia Ron; 2012-06-27 at 17:53. Reason: Re-saved
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  3. #3
    Registered User
    Join Date
    Apr 2010
    Location
    Rosario, Argentina
    Posts
    38

    Re: Mobile mh5 markers and infobubbles

    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

  4. #4
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,355

    Re: Mobile mh5 markers and infobubbles

    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.
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  5. #5
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,355

    Re: Mobile mh5 markers and infobubbles

    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
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  6. #6
    Nokia Developer Expert
    Join Date
    Mar 2012
    Posts
    65

    Re: Mobile mh5 markers and infobubbles

    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
    Last edited by ZieL; 2012-06-27 at 17:37.

  7. #7
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,355

    Re: Mobile mh5 markers and infobubbles

    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);
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  8. #8
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,355

    Re: Mobile mh5 markers and infobubbles

    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.
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  9. #9
    Nokia Developer Expert
    Join Date
    Mar 2012
    Posts
    65

    Re: [moved] Mobile mh5 markers and infobubbles

    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

  10. #10
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,355

    Re: [moved] Mobile mh5 markers and infobubbles

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

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  11. #11
    Registered User
    Join Date
    Apr 2010
    Location
    Rosario, Argentina
    Posts
    38

    Re: [moved] Mobile mh5 markers and infobubbles

    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
    Last edited by pamepros; 2012-06-28 at 19:37. Reason: The code in [CODE] is not fully showing

  12. #12
    Nokia Developer Moderator
    Join Date
    Mar 2003
    Posts
    115

    Re: [moved] Mobile mh5 markers and infobubbles

    @pamepros Great!! Encourage you to write a wiki article about your experience!
    http://www.developer.nokia.com/Commu...ory:Nokia_Maps
    Wai Seto
    Technical Marketing Manager, Developer Relations
    Twitter: @waiseto
    Web: Nokia Developer Web

  13. #13
    Registered User
    Join Date
    Jul 2012
    Posts
    6

    Re: Mobile mh5 markers and infobubbles

    Quote Originally Posted by ltomuta View Post
    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?

  14. #14
    Nokia Developer Expert
    Join Date
    Mar 2012
    Posts
    65

    Re: Mobile mh5 markers and infobubbles

    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

  15. #15
    Registered User
    Join Date
    Jul 2012
    Posts
    6

    Re: Mobile mh5 markers and infobubbles

    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.

Similar Threads

  1. Map markers not always shown when max zoomed out
    By amnesia7 in forum [Archived] Maps API for Javascript
    Replies: 8
    Last Post: 2012-11-26, 21:06
  2. Google Map URL J2ME markers
    By v2sms in forum Mobile Java General
    Replies: 1
    Last Post: 2010-02-15, 13:04
  3. Multiple markers at this line with RThread
    By gigglie in forum Symbian
    Replies: 1
    Last Post: 2008-06-19, 08:57

Posting Permissions

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