Simple way to have map on your website

Embed kolo on your website…

Great way to give a new dimension to your content.

When the content of your website is relevant to many locations on the map it is hard to “picture” it to the user.

You can try and give Google some “signal” about your website content location by providing metatag:

<META NAME="geo.position" CONTENT="51.510288;-0.092193"> 
<META NAME="geo.placename" CONTENT="London, GB"> 
<META NAME="geo.region" CONTENT="UK-LN">

which might be useful for your SEO, but hardly for your users.

Showing a photo of the location might help:

or opening the Photoshop and drawing it on the map…

but it’s time consuming and when your website content is relevant to many locations it’s almost impossible to name them all.

There must be better solution

Now there’s Kolo. A simplest possible way to show how is your website content relevant to the location.

All you have to do is add this two lines of code:
<div id="kolo-frame" style="height:400px; width:885px;"></div>
<script src="https://kolo.it/embeds/domain.js" ></script>

… inside your web page html content or blog post exaclity at the place where you want your map to appear.

And here it is:

This one is displaying all the links inside koloit website that contains urls from the domain blog.kolo.it.

if you click here

or on this Kolo widget button:

you can create link with this URL and pin it to any location you want. It will soon appear on the embedded map.

Additional adjustments

You can adjust various css styling components inline.

We suggest you to consider few most efficient ones to avoid problems that might appear such as:

  1. width
  2. height
  3. z-index
  4. margin
  5. display (absolute,relative,fixed …)
  6. top, left …

Known issues

There are some websites (usually blogs) that run on two or more different domains. For example someone writes a blog under blog.domain.com and the same content is used on domain.com/blog. If you embed your map on your blog you will have different results depending on domain that your content runs on.

To avoid this you should visit: api.kolo.it/embeddings/new and paste your preferred URL (for example: https://blog.domain.com). And, we will provide code that you should paste on your website.

With that code, user who visits your page on blog.domain.com will see the map, and users on domain.com/blog will have notification to visit your page on blog.domain.com.

I hope this makes sense :)

Finally

For more information about how Kolo works, how to include Kolo widget on your website …

Check our tutorials.

Tags: getting_started troubleshooting