Map Channels Holiday Maps - embed custom Google maps or Virtual Earth maps into your website or blog, free mapping tools, directories, custom markers, geocoding, mapplets

Map Channels

Name Password

• Home • About • News • Links • Contact • Donate

• Markers • Atlas • Geocoding • Directories • Food • Hotels • Events • Mapplets

• Tutorials • Search • Library • Dual Maps • Holiday Maps • VE Channels

• Create New Map Channel

Feed Maps A complete API to embed a Google Map on your website - supports multiple feed types, filters, directions, geocoder, Google Street View and Panoramio

Holiday Maps

Use Holiday Map scripts to embed a Google Map on any website and illustrate an area with photos and information. Holiday maps are useful for generating a map of an area you are visiting as well as for many other uses.

Holiday maps let you include the latest features of Google maps such as Panoramio, Wikipedia and Street View for your own website and combine your own data created through Google My Maps or GeoRSS feeds. All markers on the map are indexed on the sidebar and intuitive controls let you filter markers easily.

Features include :

• Panoramio photos
• Geo-tagged Wikipedia articles
• Google Street View
• Traffic Layer
• Weather Information
• User-defined KML or GeoRSS Layers
• Index sidebar
• Hotel search using the Map Channels Hotel Directory
• Google search
• Slide Show
• Google Earth 3D

This is a beta version of Holiday Maps. Please contact us if you have any bug reports, questions or suggestions.

You do not need to be logged in to create a holiday map.

Create your Holiday Map

Map Options

Map Height	px
Map Type
Google Earth 3D
Mousewheel scroll
Google Search Bar
Header Rows

Google Earth:
• The Google Earth 3D option requires a plugin to be downloaded before viewing.
• The Google Earth 3D option is a new feature in the Google Maps API and has some display bugs.
• Holiday maps will include fixes for these issues when available.

Panoramio Options

Sidebar Style
Marker Style
Marker Order
Marker Count
Image Size

Additional Options

Street View Layer
Traffic Layer
Weather Option
Slideshow Option

Feeds

Enter feed(s) to display on the map. KML files (e.g. Google My Maps) or GeoRSS files can be added.

Add New Feed

Url
Title
Colour

Note: For this beta version it is recommended to use either (a) just one feed or (b) multiple feeds of 20 or less places per feed.

Map Location

Use one or more of the three methods below (A,B,C) to set your map location and zoom level.

A Enter your Longitude (x), Latitude (y) and Zoom Level (z)

x y z

B Select your Location and Zoom Level using the map below

C Use the Google Geocoder to find an address

Click to generate a script that will embed the map on your site.

A preview of the map and embedding instructions are provided below.

Add The Map To Your Website or Blog (Simple IFrame Method)

Copy and paste the script below into your web page.

Add The Map To Your Website or Blog (Locally Hosted Method)

1 Copy the following files to a folder of your website

http://data.mapchannels.com/hm/script/v1/map.htm

http://data.mapchannels.com/hm/script/v1/hm101.js

2 Edit the Map.htm file and make two changes

(a) Replace the API Key with your own Google Maps API Key obtained from http://code.google.com/apis/maps/signup.html

(b) Add the following HTML code into the body element of the HTML page:

Note: you can rename the javascript file containing you map script to a more meaningful name. If you do this also change all the references to the filename in map.htm.

The map is now ready for use and will display in full screen on your web page.

Locally Hosted Advanced Options

You can edit the code within the file to change the map behaviour.

The parameters you can edit are :

Parameter	Description	Values
hmap.x	the longitude centre of the map	-180 to 180
hmap.y	the latitude centre of the map	-90 to 90
hmap.z	the zoom level of the map	0 to 19
hmap.mapType	the initial map type	0=Road Map 1=Satellite 2=Hybrid 3=Physical (Terrain)
hmap.googleEarthLayer	whether the Google Earth 3D option is available	0=3d unavailable 1=3d available
hmap.wheelScroll	whether mouse wheel scrolling is enabled	0=Disabled 1=Enabled
hmap.googleBar	whether the Google Search Bar is displayed in the map corner	0=Disabled 1=Enabled
hmap.topMargin	the height of a vertical margin	Height in Pixels (default=0px)
hmap.panPageSize	the maxiumum number of Panoramio images displayed at one time	25, 50 or 100 (Default=25)
hmap.panMarkerStyle	the map marker style used for Panoramio images	0=Small Thumbnail Square 1=Panoramio Icon
hmap.panSidebarStyle	the sidebar representation of Panoramio images	0=List 1=Thumbnails (Default)
hmap.panOrder	the order in which Panoramio are displayed	0=Most Popular 1=Most Recent
hmap.panImageSize	the size of displayed Panoramio image within the Info Window (the user can change the size using the 'View Small' and 'View Larger' Links)	0=Small (up to 240x240 pixels) 1=Medium (up to 500x500 pixels)
myFeeds	an array of KML or GeoRSS feeds.	Each element of the array is in the format [Url, Title, Colour]

Example Site

An example of a locally hosted holiday map can be viewed at See Bournemouth.

This map uses the hmap.topMargin parameter to display a near-full screen map with mouse wheel scrolling enabled. The Street View and Traffic options were disabled as these are not (yet) available for the UK.

Technical Notes

• The maps are best embedded using full screen width and a height of 600 pixels or more.

• KML and GeoRSS feeds of up to 100 place markers are supported. Larger feeds may not initially display correctly in the sidebar although they will appear on the map.

• The GGeoXml object is used to display KML and GeoRSS which means that the files as dynamic and will display the current contents without the need to be refreshed on the server. This feature is useful for feeds which are frequently updated.

• When used within an IFrame, links in the KML and GeoRSS feeds will open within the iframe unless the target='_blank' tag is included in the links. If this is a problem try using the locally hosted option.

• Once you have a locally hosted map set up, you can edit the javascript file to change any of the map parameters.

• Panoramio images are delivered in pages. In some cases at the end of the page list fewer images are displayed per page than the selected total.

• When using the map, clicking the Refresh button will display a new set of Panoramio and Wikipedia markers for the current map view. The map does not auto-update in order to keep the map responsive and limit the load on the Panormaio and GeoNames servers.

Credits

Panoramio geo-tagged photo-sharing community

GeoNames geographical databases and web services

Wikipedia the online encyclopedia

Mike Williams' Google Map Tutorials a great source of Google maps information, very useful for the GGeoXml sidebar code

The photo displayed in the screenshot at the top of the page is from the Panoramio collection of Brent Townshend - an impressive collection of spherical panorama images

Sponsor Links Loans - Real estate articles - Loans - Bad Credit Mortgages - Personal Loans