MapQuest OpenAPI – part 2 – Show map using address

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 [Show Plain Code]:
  1. <script src="http://web.openapi.mapquest.com/oapi/transaction?request=script&key=YOUR_API_KEY" type="text/javascript">
  2. </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) :

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

  1. <title>Basic Map With Points</title>
  2. <script src="http://web.openapi.mapquest.com/oapi/transaction?request=script&key=YOUR_API_KEY" type="text/javascript">
  3. </script>
  4. </head>
  5. <!– The DIV where the map will be displayed –>
  6. <div id=‘myMap’ class=‘myMap’ style="height:550;width:550"></div>
  7. <script type="text/javascript">
  8.         //declare the MQMap object and tell it to display the map
  9.         //in the DIV named myMap
  10.         var map = new MQMap("myMap");
  11.         //declare a MQLocation object to store our location
  12.         var loc = new MQLocation();
  13.         //set the data I know about my town
  14.         loc.setCity("Sibiu");
  15.         loc.setStateProvince("SB");
  16.         loc.setCountry("RO");
  17.         //add our location to the MQMap object
  18.         map.locations.add(loc);
  19.         //display the map
  20.         map.getMap();
  21. </script>
  22. </body>
  23. </html>

You can see a working demo here.

An example of using MapQuest API

I hope you liked this small tutorial 😀

2 comments on “MapQuest OpenAPI – part 2 – Show map using address

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.