When my application first opens, it loads the basic map as shown in this tutorial: https://developer.mapquest.com/documentation/mapquest-js/v1.3/examples/b...
I allow the user to submit a form with two address inputs. After submitting I enter the 2 direction inputs into the start and end properties of the basic directions example: https://developer.mapquest.com/documentation/mapquest-js/v1.3/examples/b...
This basically tries to reinitialize the map, from the basic map to the basic directions map using the same div id="map". But it doesn't work, the basic map is all that is displayed and the directions map does not get displayed. I get the console error: Map Container is already defined.
Would anyone know how to reinitialize the map properly? Any help would be greatly appreciated.
Thank you for replying. Can you show me an example where the same map can be used. So far I have some pretty ugly javascript code. That uses the inital map as global variable, and funtions that modify it reference that global map variable from the function. I know there is a better way to do this.
Alright, understood. Do you know if there is a way to clear the directions on the map. When i lookup more than 1 direction, it keeps the previous directions on the map, I would like to clear it before looking up the next direction, so the map is not as cluttered.
Right now, I can only think of reloading the whole page everytime with start and end points, but i would like to make the change with no reload. It would be helpful if there was an api for mapquest.js....
Hopefully this helps. This is an example I did for someone a while back.
<html>
<head>
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.0/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.0/mapquest.css"/>
<script type="text/javascript">
var L, r1, r2, dl, map, directions;
function showroute (data) {
"use strict";
var legs, maneuvers, nartext = "";
// label markers
dl.markers[0].bindPopup("origin");
dl.markers[1].bindPopup("destination");
// get legs
legs = data.route.legs;
// for each leg
legs.forEach(function(leg) {
// get maneuvers
maneuvers = leg.maneuvers;
// for each maneuver
maneuvers.forEach(function(maneuver){
// build the list of maneuver narrarive text
nartext = nartext + maneuver.narrative + "<br/>";
});
});
// display list of maneuver narrative text
document.getElementById("nar").innerHTML = nartext;
}
function doit() {
"use strict";
// let's get to routing (again)
directions.route({
start: document.getElementById("origin").value,
end: document.getElementById("destination").value
},
// directions.route callback function
function(err, data) {
if (err.message) {
document.getElementById("nar").innerHTML = err;
} else {
// remove old route, if there is one
if (dl) {
map.removeLayer(dl);
}
// let MQ put the route ribbon on the map
dl = L.mapquest.directionsLayer({
directionsResponse: data
}).addTo(map);
dl.on("directions_changed", showroute);
showroute(data);
}
});
}
function start() {
"use strict";
L.mapquest.key = "KEY";
map = L.mapquest.map("map", {
center: [0,0],
layers: L.mapquest.tileLayer("map"),
zoom: 0
});
directions = L.mapquest.directions();
doit();
}
</script>
</head>
<body style="border: 0; margin: 0;" onload="start();">
<div id="map" style="width: 800px; height: 530px;"></div>
<input type="text" id="origin" value="denver, co"/>
<input type="text" id="destination" value="golden, co"/>
<input type="submit" onclick="doit();" value="doit"/>
<div id="nar" style="width: 800px; height: 530px;"></div>
</body>
</html>
I was mad because the example you gave me was initially not working. But after inputting my mapquest key, it works amazing. Thank you for your example, this will definitely save me some time in developing my own app. Thank you again for your help, appreciate it very much.