Willie Sims
Posts: 0
Joined: Wed Jul 10, 2013 4:37 pm

Map Quest API how to plug the map in a Panel

For those who are looking for a way to use mapquest instead of google maps you can do so using the panel these are the steps to do so
I am very new to JS so I am not trying to teach just show how I did it, If there is a better way then please jump in
Go to the mapquest developer site http://developer.mapquest.com/web/doc...
You will need to sign up for a free key, after doing so the first example "simple map"
The first line of the code is a sdk href copy it to a notepad and edit the key= with your key.
codehttp://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=YOUR_KEY_GOES_HERE/code
Create a new javascript with the source being the link you copied for the sdk with your key,
Next create a new screen and delete the header and footer,
Add a Panel and resize it to full screen
edit html source add in the code <div id="map" style="width:800px; height:300px;"><&#47;div/code change the px to the same size as your panel, You might also change your Margins on your panel down to 1
Create an event, on the screen load javascript
code
&#47;An example of using the MQA&#46;EventUtil to hook into the window load event and execute defined function
passed in as the last parameter&#46; You could alternatively create a plain function here and have it
executed whenever you like (e&#46;g&#46; <body onload="yourfunction">)&#46;&#47;

Code: Select all

 MQA&#46;EventUtil&#46;observe(window, 'load', function() { 

   &#47;*Create an object for options*&#47;  
   var options={ 
     elt:document&#46;getElementById('map'),       &#47;*ID of element on the page where you want the map added*&#47;  
     zoom:10,                                  &#47;*initial zoom level of the map*&#47;  
     latLng:{lat:39&#46;743943, lng:-105&#46;020089},  &#47;*center of map in latitude&#47;longitude *&#47;  
     mtype:'map',                              &#47;*map type (map)*&#47;  
     bestFitMargin:0,                          &#47;*margin offset from the map viewport when applying a bestfit on shapes*&#47;  
     zoomOnDoubleClick:true                    &#47;*zoom in when double-clicking on map*&#47;  
   }; 

   &#47;*Construct an instance of MQA&#46;TileMap with the options object*&#47;  
   window&#46;map = new MQA&#46;TileMap(options); 
      MQA&#46;withModule('largezoom','traffictoggle','viewoptions','geolocationcontrol','insetmapcontrol','mousewheel', function() { 

 map&#46;addControl( 
   new MQA&#46;LargeZoom(), 
   new MQA&#46;MapCornerPlacement(MQA&#46;MapCorner&#46;TOP_LEFT, new MQA&#46;Size(5,5)) 
 ); 

 map&#46;addControl(new MQA&#46;TrafficToggle()); 

 map&#46;addControl(new MQA&#46;ViewOptions()); 

 map&#46;addControl( 
   new MQA&#46;GeolocationControl(), 
   new MQA&#46;MapCornerPlacement(MQA&#46;MapCorner&#46;TOP_RIGHT, new MQA&#46;Size(10,50)) 
 ); 

 &#47;*Inset Map Control options*&#47;  
 var options={ 
   size:{width:150, height:125}, 
   zoom:3, 
   mapType:'map', 
   minimized:true }; 

 map&#46;addControl( 
   new MQA&#46;InsetMapControl(options), 
   new MQA&#46;MapCornerPlacement(MQA&#46;MapCorner&#46;BOTTOM_RIGHT) 
 ); 

 map&#46;enableMouseWheelZoom(); 
      }); 
 });  

/code

you can edit the map controls to the features you want read through the api docs to decide, mapquest does offer mobile support features and Json
They also do not charge like google does
here is the app created as above
http://appery.io/app/mobile-frame?src...

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

Map Quest API how to plug the map in a Panel

Thanks for posting, we'll add a link in our docs.

Aisha Aslam
Posts: 0
Joined: Wed Aug 27, 2014 4:47 am

Map Quest API how to plug the map in a Panel

sir
i have to build an android app for my project, as i am new with android programming that's why i need your help in this. sir i have tried to build an app from your website but i need more help from you people so i should be able to complete my project ..i need to build an android app which contain 8 or 9 buttons and functionality of the button should be such that when i press a button(for car start) it should open the new window which further contain two buttons 1-start with blue tooth 2- start with GSM (i-e through text message) and when i press the 1st button it should automatically open the blue tooth app installed on my cell phone and like wise when i press the 2nd button it should automatically open the create message icon of my cell phone ..please help me out in this

Peony Rose
Posts: 0
Joined: Wed Oct 28, 2015 7:59 am

Map Quest API how to plug the map in a Panel

Hi,
The above solution is not posted on the appery.io website. Does it not work?

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Map Quest API how to plug the map in a Panel

Hello,

This is pretty old thread, can not say for sure whether this is working solution or not.
We do not have alternative solution, you can try this one.

Return to “Issues”