Customize your map by puting HTML code in your markers

Tips - June 22, 2015

If you never guessed, it is possible to add extra tabs to your markers in Click2Map editor. Multiple elements can be added like Photo, Code or Text tabs.

You can create as many tabs as you need and use them to add as much content as you want, except the Photo tab which can contain only one photo.

So, the Code tab exists in order to enrich your marker with multiple content types, images or videos. It permits to embed any kind of HTML code. Adding images, a slide show, a video, everything is possible!

 

Let’s start from the beginning. HTML, what is it?

HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. It is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.

(- Wikipedia definition)

Even without expertise, embed some lines of code in your webpages and, particularly, in your markers, become conceivable.

 

HTML coding basics

For the most inexperienced of you, here are some basis of HTML code to form a text, embed a link or an image.

1/ Form a paragraph

  • Text alignment

To line up your text, it suffices to place your paragraph between the two HTML tags <p align=”…”>…</p>.

  • Alignment to the left
<p align="left">The text is lined up to the left.</p>

Result:

The text is lined up to the left.

  • Alignment to the right
<p align="right">The text is lined up to the right.</p>

Result:

The text is lined up to the right.

  • Centered alignment
<p align="center">The text is centered.</p>

Result:

The text is centered.

 

  • Justified text
<p align="justify">This text is justified. It requires two lines and more text for a paragraph. So, you will be able to see this example correctly. This text is justified. It requires two lines 
and more text for a paragraph. So, you will be able to see this example correctly. This text is justified. It requires two lines and more text for a paragraph. So, you will be able to see this example correctly.</p>

Result:

This text is justified. It requires two lines and more text for a paragraph. So, you will be able to see this example correctly. This text is justified. It requires two lines and more text for a paragraph. So, you will be able to see this example correctly.This text is justified. It requires two lines and more text for a paragraph. So, you will be able to see this example correctly.

 

  • Line break

To force a line break in a text, place the tag <br>.

You need a line break at this exact spot <br>to form your paragraph.

Result:

You need a line break at this exact spot
to form your paragraph.

 

2/ Insertion of a link

To embed a link in a text, you have to put the concerned sentence between the different tags: <a href=”…”>…</a>

  • Put a link into one of your page

<a href="blog/publish-your-map-on-blog-and-facebook-page">Example of a blog post</a>

Result:

Example of a blog post

  • Open a link in another window of your browser

<a href="blog/publish-your-map-on-blog-and-facebook-page" target="_blank">Example of a blog post</a>

Result:

Example of a blog post

  • Put a link into another website www.

<a href="https://www.click2map.com/" target="_blank">Click2Map website</a>

Result:

Click2Map website

  • Put a link into an email

<a href="mailto:support@click2map.com">Click2Map support</a>

Result:

Click2Map support

 

3/ Insertion of an image

To insert a picture in a text or a page, it suffices to put the link of the image in the tag <img src=”…”>.

  • Define the path of the image

<img src="/sites/default/files/field/image/logo.png">

Result:

 

 

 

 

  • Add a frame to the image

<img src="/sites/default/files/field/image/logo.png" border="1">

Result:

 

<img src="/sites/default/files/field/image/logo.png" border="3">

Result:

 

  • Line up an image

To line up your picture, you can add align=”...” in your HTML tag.

  • Alignment to the left
<img src="/sites/default/files/field/image/logo.png" align="left">

Result:

 

 

 

 

  • Alignment to the right
<img src="/sites/default/files/field/image/logo.png" align="right">

 

Result:

 

 

 

 

 

  • Centered alignment
<img src="/sites/default/files/field/image/logo.png" align="center">

Result:

 

Example: insertion of an image with an URL link as a caption

Open the editor.

Go kindly into the concerned marker and click on Extra tabs.

Click on the Code button.

And embed the following code in the blank box:

<p style="text-align:center;"><img src="http://photography.nationalgeographic.com/u/TvyamNb-BivtNwcoxtkc5xGBuGkIMh_nj4UJHQKuoX2qVisnEW07zLsqCPS7VXCJq-rbu87qfeSDfQ/" alt="Image" width="260px"/>
<br><a href="http://photography.nationalgeographic.com/photography/photo-contest/2014" target="_blank" title="Source National Geographic">Source National Geographic</a></p>

Result:

Click on the image or on this link to consult the interactive map.

Ready to code?

There's an efficient website where you can do some code tests with a live preview of the result. A really useful tool before modifying and coding your webpages and your markers!

Tryit Editor

All you need to do is test some code lines to embed them in a Code tab of your markers.

And if you are stuck, don’t hesitate to contact us at: support@click2map.com.

Why wait?

Start mapping now!