This guide illustrates methods to use when adding maps to your site.
Simple maps (displaying a single place) can be generated using the Geocoder.
1. Map link
2. A 'View Map' button
3. Embed a map using an Iframe
4. Adding link buttons to an existing map (advanced)
5. Banners
The easiest way to add a map is to add a link that will open in a new browser tab. Most mapping tools on Map Channels include a link script that can be copied and pasted into a web page.
Links should include the tage target="_blank" to open in a new tab. Styling such as font size, colour, etc can be set in the style tag.
Here is an example link to a Quad View Map: View Map
HTML script
It is possible to create a button to open a map in a new tab of a new pop up window.
See this Window open() reference.
Iframes allow a map to be embedded directly onto a web page. Many of the mapping tools on Map Channels include an iframe script that can be copied and pasted into a web page.
See this Iframe reference.
It is possible using javascript to create a link within an existing map application that will open up a Map Channels map in a new browser tab.
This can be useful in some situations, for example if you have a Leaflet OSM (Open Street Map) map and wish to see the street view for a location on that map.
See an example of a link to Dual Maps within this Demo Map.
Some mapping tools such as Dual Maps can be set to include a banner when the map is displayed in full page mode.
Use banners to add your own branding to the map page and to help users to return to your website after viewing a full page map.
The banner is a simple HTML page that is included within the map using an iframe.
Here is a sample banner : https://www.mapchannels.com/dualmapbanner.htm. View the page source to obtain the HTML for this sample banner. Note that links within the banner should include the tag target='_top' so that the link opens in the full page.
This link to a Dual Map contains 2 parameters which specific the banner URL (&bu) and the banner height (&bh).
https://www.mapchannels.com/dualmaps7/map.htm?lat=50.715654&lng=-1.875344&z=17&slat=50.715608&slng=-1.875362&sh=13.96&sp=0&sz=1&sa=1&ss=0&be=0&as=1&gl=0&rm=1&panel=mbsi&gm=0&bm=2&mw=1&mv=1&md=1&mi=https://maps.google.com/mapfiles/ms/micons/red-dot.png&lang=en&bu=https://www.mapchannels.com/dualmapbanner.htm&bh=40