Create a Simple CSS Pin Map with Ease

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only.

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”>
    <li class=“p1”>
      <a href=“” title=“London”></a>
    <li class=“p2”>
      <a href=“” title=“Birmingham”></a>
    <li class=“p3”>
      <a href=“” title=“Leeds”></a>
    <li class=“p4”>
      <a href=“” title=“Glasgow”></a>
    <li class=“p5”>
      <a href=“” title=“Sheffield”></a>
    <li class=“p6”>
      <a href=“” title=“Bradford”></a>
    <li class=“p7”>
      <a href=“” title=“Edinburgh”></a>
    <li class=“p8”>
      <a href=“” title=“Liverpool”></a>
    <li class=“p9”>
      <a href=“” title=“Manchester”></a>
    <li class=“p10”>
      <a href=“” title=“Bristol”></a>
</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...

Excellent tutorial and sample code. I was able to get my map with the pins on my personal site.

Thanks so much!

- Gerardo Ramirez

Fit code you post, thanks pal.

- boat parts

That’s way more clever than I was expecting. Thanks!

- Demelza

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.