Create a Simple CSS Pin Map with Ease

It is easy to create a map with pins that you can position to correspond to a point of interest then hyperlink the pin to another page or get creative and use javascript to trigger an event. In this example we have a map of the UK with pins positioned roughly over the top ten cities by population. The pins link to the cities Wikipedia page and use the title attribute to show the name when hovering over the pin. This is a bare bones example for you to build on, you could use image sprites to change the image of the pin to a marker of your choice or use javascript to create information bubbles when you mouse over the marker the choice is up to you.

Download Source ZIP File (88,8820 bytes)

Working example of the map. Hover over the pins to see the city name and click to visit the Wikipedia page that corresponds to that city.

We use an unordered list within a div that holds our links. The markup should look something like this:

<div id=“mapholder”>
  <ul>
    <li class=“p1”>
      <a href=“http://en.wikipedia.org/wiki/London” title=“London”></a>
    </li>
    <li class=“p2”>
      <a href=“http://en.wikipedia.org/wiki/Birmingham” title=“Birmingham”></a>
    </li>
    <li class=“p3”>
      <a href=“http://en.wikipedia.org/wiki/Leeds” title=“Leeds”></a>
    </li>
    <li class=“p4”>
      <a href=“http://en.wikipedia.org/wiki/Glasgow” title=“Glasgow”></a>
    </li>
    <li class=“p5”>
      <a href=“http://en.wikipedia.org/wiki/Sheffield” title=“Sheffield”></a>
    </li>
    <li class=“p6”>
      <a href=“http://en.wikipedia.org/wiki/Bradford” title=“Bradford”></a>
    </li>
    <li class=“p7”>
      <a href=“http://en.wikipedia.org/wiki/Edinburgh” title=“Edinburgh”></a>
    </li>
    <li class=“p8”>
      <a href=“http://en.wikipedia.org/wiki/Liverpool” title=“Liverpool”></a>
    </li>
    <li class=“p9”>
      <a href=“http://en.wikipedia.org/wiki/Manchester” title=“Manchester”></a>
    </li>
    <li class=“p10”>
      <a href=“http://en.wikipedia.org/wiki/Bristol” title=“Bristol”></a>
    </li>
  </ul>
</div><!—end #mapholder—>

We then apply our CSS:

#mapholder {
  width: 400px;
  height: 512px;
  background: url(img/uk_map.png);
  position: relative;
  overflow: hidden;
  }
#mapholder ul {
  background: transparent;
  padding: 0;
  margin: 0;
  width: 400px;
  height: 512px;
  list-style: none;
  }
/* needed for IE to function correctly */
#mapholder ul li {
  display: inline;
  width: 0;
  height: 0;
  }
#mapholder ul li a {
  position: absolute;
  display: block;
  width: 20px;
  height: 24px;
  background: url(img/map_pin.png);
  cursor: pointer;
  }

We then use some more CSS to position our pins on the map:

#mapholder ul li.p1 a { left:290px; top:377px; }
#mapholder ul li.p2 a { left:227px; top:318px; }
#mapholder ul li.p3 a { left:240px; top:260px; }
#mapholder ul li.p4 a { left:160px; top:150px; }
#mapholder ul li.p5 a { left:235px; top:280px; }
#mapholder ul li.p6 a { left:245px; top:260px; }
#mapholder ul li.p7 a { left:190px; top:145px; }
#mapholder ul li.p8 a { left:200px; top:280px; }
#mapholder ul li.p9 a { left:215px; top:280px; }
#mapholder ul li.p10 a { left:200px; top:390px; }

Now you can position the pins wherever you want on the map by changing the position values in the last block of CSS. To use another map simply replace the PNG image with your own map or image and adjust the sizes in the CSS file accordingly. If you use this technique somewhere post a comment below to say thank you.

This article was posted on 19 March 2010 in Code, CSS, HTML, Tutorials

What you have had to say about all this...

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.