Ridecast logo
May 31, 2007

Customize your map

Filed under: Howtos / tips / tricks — mtbguru @ 7:06 pm

Embedding a trip map on your own website or blog has become a quite popular feature. To do this, you insert a snippet of HTML code (an ‘iframe’), which is listed on each trip page, onto your own site.

By default, the size of the embedded map is 500 pixels wide by 500 pixels long, giving you a street map view with zoom level chosen such to contain the entire track.

From now you will be able to change these settings and customize the way your map looks.

Let’s take a look at the code:

custommaps1.jpg

At the end of the iframe’s URL, appended right after the question mark, you see attributes ‘width’ and ‘height’ (which are bold faced here). To get a different map size, just change the numbers of pixels listed – make sure though to also change the corresponding “width=” and “height=” properties following this: add 10 pixels to width, and 65 pixels to height, to avoid ugly scroll bars. for instance, this code creates a 600 pixels wide by 300 pixels tall map:

custommaps2.jpg

You can also add new attributes to change the appearance of the map:

  • fit: default = 1. When set to 0, the map won’t scale to fit the track any longer, and you’ll have to provide your own zoom parameter (see next item).
  • zoom: Google maps zoom level. A higher number increases the zoom level and will show more detail (if available).
  • type: default = 0. When 0 -> show street map. When 1 -> show satellite view. When 2 -> show hybrid satellite + street map view
  • first: default = 1. When 1 -> show a marker on the first point of the track.
  • last: default = 0. When 1 -> add an additional marker to indicate the last point of the track and center the map around this marker.

You can append these to the iframe’s URL while separating them with ampersands; you can specify the options in any order you want and you can omit them if you’re happy with the default value.

This may all sound a bit complicated but it is very simple, just take a look at this example:

custommaps3.jpg

The changes with respect to our original code are indicated in bold: the map size has been changed, a zoom level of 12 is set (the map doesn’t simply just fit the track any longer) and a hybrid satellite/street view is shown.

If you’re using embedded maps or are planning to do so, make sure to play around with this, and give your map the look you prefer.

Leave a Reply