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;"></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
/An example of using the MQA.EventUtil to hook into the window load event and execute defined function
passed in as the last parameter. You could alternatively create a plain function here and have it
executed whenever you like (e.g. <body onload="yourfunction">)./
Code: Select all
MQA.EventUtil.observe(window, 'load', function() {
/*Create an object for options*/
var options={
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/
zoom:10, /*initial zoom level of the map*/
latLng:{lat:39.743943, lng:-105.020089}, /*center of map in latitude/longitude */
mtype:'map', /*map type (map)*/
bestFitMargin:0, /*margin offset from the map viewport when applying a bestfit on shapes*/
zoomOnDoubleClick:true /*zoom in when double-clicking on map*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('largezoom','traffictoggle','viewoptions','geolocationcontrol','insetmapcontrol','mousewheel', function() {
map.addControl(
new MQA.LargeZoom(),
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
);
map.addControl(new MQA.TrafficToggle());
map.addControl(new MQA.ViewOptions());
map.addControl(
new MQA.GeolocationControl(),
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT, new MQA.Size(10,50))
);
/*Inset Map Control options*/
var options={
size:{width:150, height:125},
zoom:3,
mapType:'map',
minimized:true };
map.addControl(
new MQA.InsetMapControl(options),
new MQA.MapCornerPlacement(MQA.MapCorner.BOTTOM_RIGHT)
);
map.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...