Hi,
Welcome to the part 2 🙂 (in case you didn’t read the first part please go back, read it and return here)!
Now we will write the first pieces of code, so let’s start ….
Open your HTML editor and insert the code below into the HEAD section (between <head> and </head>) :
JAVASCRIPT
-
<script src="http://web.openapi.mapquest.com/oapi/transaction?request=script&key=YOUR_API_KEY" type="text/javascript">
-
</script>
Don’t forget to replace YOUR_API_KEY with your real API key, if you don’t do this the script will raise an error : “Error : 9902 – There was a problem with your referer/key combination”.
Now, on the BODY section (between <body> and </body>) insert a DIV tag (the map will be drawn there) :
HTML
-
<div id="MyTestMap"></div>
Now comes the most important part … the JavaScript code :
We must follow some simple rules :
- Create an MQMap object – it will store our map. As a parameter we must write the ID of the DIV tag where we want the map to appear.
- Create an MQLocation object – it will tell the main server details about which map to show. You can set the address, city, state, zip code, country using the following functions :
- setAddress
- setCity
- setStateProvince
- setPostalCode
- setCountry
- Call the getMap function of the MQMap object
Here is an example of all from this tutorial :
HTML
-
<title>Basic Map With Points</title>
-
<script src="http://web.openapi.mapquest.com/oapi/transaction?request=script&key=YOUR_API_KEY" type="text/javascript">
-
</script>
-
</head>
-
<!– The DIV where the map will be displayed –>
-
<div id=‘myMap’ class=‘myMap’ style="height:550;width:550"></div>
-
<script type="text/javascript">
-
//declare the MQMap object and tell it to display the map
-
//in the DIV named myMap
-
var map = new MQMap("myMap");
-
//declare a MQLocation object to store our location
-
var loc = new MQLocation();
-
//set the data I know about my town
-
loc.setCity("Sibiu");
-
loc.setStateProvince("SB");
-
loc.setCountry("RO");
-
//add our location to the MQMap object
-
map.locations.add(loc);
-
//display the map
-
map.getMap();
-
</script>
-
</body>
-
</html>
You can see a working demo here.
I hope you liked this small tutorial 😀
For the basic levels of map this code is fantastic.
Actually I want to do same thing which is there in the demo like zooming ,display points on map etc.
But i donot want to use any of the functions from googlemap or from any other source.
I want to do it from scrach means I have to write my own javascript function for which adds points on map,dragging of map with points and zooming .
If you have any idea about this please reply me immediately.
Thanks.
Hi,
Have you tried the MapQuest forums? (they helped me a lot doing the job I needed to do)