Mapstraction tutorial part 2 - Adding map controls and markers

| |

In the first part of our Mapstraction tutorial we displayed a simple Google map. Now we'll take a look at the API documentation and add some controls to our map along with a couple of markers, one simple, one more complex with a custom graphic.

You can see the HTML for this page here, and the running example here. The Mapstraction APIs that I mention are also linked to the documenation. Note that we're starting with the same code from the first tutorial, but made the map bigger by changing the <div> style:
    <div id="simplemap" style="width: 800px; height: 600px">

Step 1: Add the map controls

In most map applications you're going to want to provide at least some graphic controls to help your users pan and zoom. If you want a minimal set of controls you can use addSmallControls() but I decided to go with the code mapstraction.addLargeControls(). In both cases there are no parameters to supply. I wasn't able to get setMapType() working to set the display type of the map (display just the roads, a satellite image, or both - ROAD, SATELLITE, HYBRID). Leave a comment if you have any suggestions as to what I could try to fix this.

Step 2: Add a simple marker

Having a movable/resizable map is great, but now let's add some markers.

With just one line of Mapstraction code we can add a really simple marker. It won't have any hover-text, and if you click on it nothing happens, but in some cases it is all you'll need. (Note that you add the markers after you get the map up and running in the JavaScript with the setCenterAndZoom().) The line of code is:
    mapstraction.addMarker( new Marker(
      new LatLonPoint(43.676035365153986, -79.38673496246338) ) );

Step 3: Add a complete marker

There are a few parameters we can include for each marker we add to the map; each requires one or more calls to the Mapstraction API, but they greatly enhance the usability of the map.

In this example you see we have:

  • a (poorly designed) blue custom marker
  • text that appears when the mouse hovers over the marker (in this case 'An office tower')
  • a bubble that appears when you click on the marker (that even contains HTML coding)

So what do we need to add?

First we'll create another Mapstraction LatLonPoint, called towerPoint with the latitude and longitude of the office building:
    var towerPoint = new LatLonPoint(43.67035499913276, -79.38536167144775 );

We'll use that point to create a new Mapstraction Marker, called towerMarker
    var towerMarker = new Marker(towerPoint);

Now we can start calling methods of the Marker we created. The Mapstraction setLabel method is used to indicate the text to display when you mouse over the marker:
    towerMarker.setLabel("An office tower");

The Maptsraction setInfoBubble method is used to assign some HTML to the bubble that pops up when you click on the pointer:
    towerMarker.setInfoBubble("An office tower; <a href=''>click here to see a picture</a>");

And finally we'll define a custom graphic for this marker, rather than the default, using the Mapstraction setIcon method. Note that in this case I placed the icon in the same directory as my map HTML:

Once we've set all the details for the marker, we add it to the map using the Mapstraction addMarker function:

That's it! Save your HTML file, move it (and any custom marker graphics you create) across to your server in the location you've set up, and it should look a lot like this running example.