Map Container is already defined Error, when trying to load directions onto basic map

8 posts / 0 new
Last post
tonyko
Map Container is already defined Error, when trying to load directions onto basic map

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.  

 


MQBrianCoakley
The same map can be used with
The same map can be used with new bounds and a new map, and map transactions, do not need to be created.   If the map needs to be recreated, you might be able to use map.remove() with better results.

tonyko
Thank you for replying. Can

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. 


MQBrianCoakley
I use a global variable. No,
I use a global variable. No, it doesn't fit all the academic best practices, but if there are numerous functions that affect the state of the map, that's the simplest method to make it happen.

tonyko
Alright, understood. Do you

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


MQBrianCoakley
Hopefully this helps. This is

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>


tonyko
I was mad because the example

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.


MQBrianCoakley
Cool. Glad it helped.
Cool. Glad it helped.