Map Channels Map Channels
• Free Mapping and Navigation Tools
• Embed a Google Map into your Website or Blog Without Coding
Home About Contact News Site Map Links Markers API Key Geocoder Custom Coding Donate
    Map Channels version 5     Create Map   Featured Maps   Tour Maps Primer Tutorial Feedback FAQ Licence
Dual Maps Route Maps Local Maps Treasure Maps Map Channels version 4 Video Maps   My Video Maps  

Map Channels (v3) Tutorial

Video Tutorial

This video tutorial by Daniel Sato is a great guide to creating a map from scratch. It covers creating and editing a map using Google's My Map service and then using Map Channels v3 to generate an embeddable map for your website. Recommended viewing if you are new to creating web maps.

Managing Maps, Feeds and Dictionaries

Click on 'My Map Channels' to manage your Map Channels. From here you can create, edit or delete your maps, feeds and dictionaries.

Feeds Tutorial

Feed Data Source

Feeds usually have a data source. This is the URL where the original data resides. You can select to refresh a feed daily, so that every day Map Channels will download a copy of data. You can also refresh the data at any time on the Feed Edit page.

Feed Style

You can define a custom style to apply to all map elements in the feed - this sets the marker icon and line and polygon styles.

Spreadsheet Options

Spreadsheet feeds can be from one of two possible sources, (1) tab-delimited text (2) a Google spreadsheet

Spreadsheets can only contain map markers, lines and polygons can not be created from spreadsheets

Data in spreadsheets require a minimum of 3 columns which must have an exact name. These fields are 'name', 'x' and 'y'.

• name : the title of the map element
• x : the longitude of the map element
• y : the latitude of the map element

A field named 'id' can also be defined, if an 'id' field is specified this will be used as a unique marker identifier.
Additional fields can be included, these fields are displayed on the map using template functions.

Spreadsheet Template Functions (Advanced)

Spreadsheet Template Functions are an advanced feature which require a little knowledge of javascript. However using these functions will give you access to some of the most powerful features within Map Channels v3.

Within the Spreadsheet Template section are 6 text boxes where you can enter a template function. These functions are:

• Sidebar Template
• Description Template
• Maximized Description Template
• Tooltip Template
• Icon Template
• RSS Template

About Templates

A template is a block of javascript code. A template is not a complete function, rather it is the section of code:

function example(place)
{
// <- Template Goes Here
}

Each template function take a place object as a parameter and should return a string value.

The Place Object

Each cell of the spreadsheet header line corresponds to a place property name.

Propertu name are converted to lower case with spaces replaced by underscore, e.g. "Full Address" becomes "full_address".

Property names should contain only alphanumeric or underscore characters

Property names should start with an alphabetic letter (not numeric or other symbol)

Spreadsheets should always contain three column headings labelled name, x and y.

Types of Template

Sidebar Template : defines the text displayed below the place name in the sidebar (if any)

Description Template : defines the text displayed in a normal info window that appears when a map marker is clicked

Maximized Description Template : defines the text displayed when a maximized info window. This is only used when a map has the maximizable info window option set.

Tooltip Template : defines the text displayed when the cursor hovers over a map marker

Icon Template : defines the URL of the marker image displayed on the map

RSS Template : defines the URL of an RSS feed associated with the marker. Note that when this template is defined the map option 'display description in sidebar' will automatically be set. When the marker is clicked the contents of the RSS Feed will be read in and displayed in the sidebar, below the place description.

Example Templates

The best way to understand how to use templates is to run through an example

(1) Create a test spreadsheet with columns labelled : id, name, x, y, address, photo, link

(2) Add a few places to the spreadsheet

(3) Save the feed as a tab-delimited spreadsheet or Google spreadsheet

(4) Create a new Map Channel using this spreadsheet as the data source

(5) Click 'Edit Feed Settings' to go to the Feed Edit Page

You are now ready to define some templates.


(1) Enter in the sidebar template section the following code:

return place.address;

Then click 'update' and you should see that in the sidebar the address of each place is displayed beneath the name.

(2) Enter in the tooltip template section :

var html=place.name;
if (place.photo)
{
html += "<img src='" + place.photo + "' style='max-width:100px;max-height:100px;' />";
}
return html;


This will display a thumbnail size version of the photo when the cursor moves over a marker on the map which has a photo. Markers without photos will only display the place name.

(3) In the Description Template section :

var html=place.name;
html += "<br>";
html += place.address
html += "<br>";
if (place.photo)
{
html += "<img src='" + place.photo + "' style='max-width:300px;max-height:300px;' border=0 />";
}
if (place.link)
{
html += "<br/><a target='_blank' href='" + place.link + "' >Click Here</a><br>";
}
return html;


This will display the name, address and if available a photo and a link. Note that the link includes target='_blank' which will open the link in a new browser tab or window. This is necessary as the map is embedded in an iframe. Alternatively you could use target='_top' to open the link in the same browser page (breaking out of the iframe).

There are many more possible ways to use Spreadsheet Templates to customize your map, these are just some examples to get you started.

There are many web resources available to learn javascript and html which help in creating template functions.

These are a couple of useful tutorial sites found from a quick Google search www.learn-javascript-tutorial.com and www.htmltutorials.ca/

It is probable that you'll enter a template in the wrong format and the map will not display at all. Don't panic, just check the last edits you have made - 9 times out of 10 it will be caused by a missing quote or similar syntax error.






 

 • Open Tour Map  • Team Maps  • Map Channels Events  • Map Channels Hotels  • TripGeo  • Street Cities  • My Maps Plus (c) www.mapchannels.com, 2007-2017   Terms