Mapstraction tutorial part 3 - Switching from Google Maps to Yahoo

| |

One of the main benefits of Mapstraction is the ability to write the code once, and easily use it with different mapping systems (eventually even OpenStreetMap). So in part three of this tutorial we'll try switching from Google Maps over to Yahoo Maps. Will it really be as simple as changing one parameter?

If you haven't done so already, you should consider taking a look at the first 2 turorials in this series:

  1. Getting a Google Maps key and a simple Mapstraction 'hello-world' map up and running
  2. A more advanced map with map controls and markers

Step 1: Get access to the Yahoo Maps API

  1. Sign up for a Yahoo Maps 'application ID' from this URL. Unlike the Google key, you can define your own application ID (between 8 and 40 characters).

Step 2: Modify our existing Mapstraction code

  1. Make a copy of the HTML code from tutorial 2 and save it as zMapstraction-demo2-yahoo.html
  2. We'll need to add a bit of Javascript at the top of the file (like we did with Google) to enable Mapstraction to call the Yahoo map API:
        <script type="text/javascript" src=" Yahoo application ID)"></script>
  3. Change just one parameter when creating the mapstraction object, to use the different mapping API::
        var mapstraction = new Mapstraction('simplemap','yahoo');
  4. Give it a try! (Yup, it really is 1 additional line of code, and one change.) Your code should look like this, and the page itself should look like this.

Step 3: Further additions for the Yahoo Map

  1. OK, so the resulting map isn't quite the same as Google Maps... in particular I had to manually call the addMapTypeControls method to get the option to switch between the pure map, a satellite image, and a hybrid. But other than that I'm impressed!